> layout > flash > graphics optimisation » dreamweaver > compression > fireworks » streaming audio » beyond HTML » home page 


yy tutoriffts for 
EVERY Web designer 
> 44 full walkthroughs 
Win Adobe GoLive 4 
Software Buyer’s Guide 
& online Resource Listing 


06 
= i 
Rove Glerentee 9 7 1 4 6 5 1 1 2 0 0 3 


7 


The new generation 
of tools for the 
creative professional. 


You use loops and sprites, sounds 
and frames to create virtual worlds 
and out-of-this-world realities. That's 
cool... so long as you've got 
an input tool! to match your 
output. Time you got to 
know Wacom Intuos - the 
ultimate graphics tablet 
system for multimedia 
professionals. Expand and perfect your work 
methods with ergonomically-designed tablets 
and a wide variety of input devices, including 
the revolutionary Intuos 4D Mouse. With abso- 
lute positioning and a resolution of 2,540 Ipi, 
this mouse is capable of hitherto undreamed - 


of levels of precision - and its unique thumb- 


wheel lets you navigate your work speedily and 


efficiently, with 1,024 levels in two directions. 
Your thumb’s never had so much fun. 


For fast, enjoyable multimedia work... try Intuos. 


Wacom Intuos, the new input system. 
So good it’s virtually unreal. 


* Next generation professional graphics tablet 
system with new groundbreaking technology 
from the market leader* of graphics tablets 
¢ New advanced pen - increased sensitivity 
with 1,024 pressure levels 
* Designed to be the most ergonomic 
tablet system ever 
¢ Auto-configures for different tools 
¢ Six tool options. Five tablet sizes 
including brand new A4 regular size 
¢ Launch special: With free Painter Classic 
and PenTools 3.0 (Creative Plug-ins) 
© For Windows 95/98/NT, MacOS, SGI 


* Pacific Technology Ass., 1997 


WACOA\ 


For more information 
call: 0181 3 58 58 57 
or check the net: 
http://www.wacom.de 


Mad Frank @ madfrank@bartucca.dircon.co.uk 
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The definitive guide to Web design + 


Turning code into beauty... 


o by now you've worked out 
what was bothering you 
abotit the woman on the 
cover — with her piercing 
blue eyes and face made out of words. 
The words, of course, are HTML code, 
and she’s a prime example of how 
something as potentially dull as 
streams of code with their tags and 
odd symbols can be manipulated to 
make an item pleasing to the eye. 
That's just what this Computer 


Ss 
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Arts Special is all about —- turning code 
into beauty. You may be a professional 
Website or multimedia designer, or 
maybe you're a graphic designer or 
illustrator working in print and 
looking to embrace today’s fastest- 
growing medium. Perhaps you've got 
a business or interest you want to 
publicise on-line and need to build 
yourself a Website from scratch? Either 
way, we've got all the tips, tutorials, 
walkthroughs and software you'll need 


eae 
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to create all the content, and then 
design, update and improve your site. 
As well as Design Fundamentals 
and Getting Started Tips, you'll finda 
whole series of ‘topic’ tutorials — from 
Colour Palettes to Navigation to 
Animation. Then there are a number of 
walkthroughs in individual software 
titles - Dreamweaver, RealAudio and 
more. Plus, we’ve cornered the UKk’s top 
Web design houses and forced them to 
divulge their secrets. Read on... EE 
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(06 Getting up to speed 52 Meet Motion Pixels 
E G Dreamweaver 2 Want to get started in Web The company behind some 
design? Here’s what you'll get of the best on-line designs 
me os from this magazine — plus... shares its secrets. 


Get up to speed quickly with 1. ° 
our guides and top tips. 54 Interactivity tutorial 


They want to click buttons! 

11 

11. Beyond HTML They want it to move! We 
Everything’s built from code - show you how... 


but you want to see your site med ough 
do more, right? 58 Real ia walkthr 


'T-] Dreamweaver 2 Streaming audio and video 
in an instant. 
a Get to grips with the powerful 
AE ‘ ‘ : new features in the latest 62 Lear yan ait 
m= Website design and construction version of Macromedia’s See how the award-winning 
ng sf using the old favourites and brand WYSIWYG hit! new media consultants gets 
Te Revea! tH iis ++ new features in Dreamweaver 2... @ subscribe to Specials its results. 
> il ‘ 7 
coe Get the next four Specials. 65) Win GoLive 4 & more! 
Subn case GoLive 4, Photoshop 5 & 
ay . 22 pct nctu! Illustrator 8 up for grabs! 


Fireworks 2 


This superb new media firm . 
shows how it’s done. 66 Senibe ten 


24 Colour palettes Save money on the best- 
selling mag for creatives. 


How to work with those 216 . = 
Web-safe colours. 68 Movies tutortal 


28) Fireworks 2 The best ways to incorporate 
movies in your site. 


The top image optimisation 
tool: step-by-step tutorial. 


+ sande Invention and delivery from 
+32 Navigation & layout this talented bunch. 


The secret to any good site is ination a 
finding your way round it. 76 Animation tutorial 


36 AKQA showcase Stuff that moves! A smart 
way to liven up your Website. 


More of the UK’s best Website 81 Further reading 
designers reveal all. 


72 Deepend showcase 


Books and magazines for 
38) Flash 3 walkthrough Web designers reviewed. 
This animation tool has Buyer’ ide 
= become the standard for the 83 oe 
cD Interactive Web — make sure you’re The best WYSIWYG layout 
getting the most from it... tools, graphics optimisers 
On the Computer Arts Web Special CD: 42 Flash 4 news and HTML editors laid bare. 
=| . r 
30-day full software: Dreamweaver 2, "ee a aaa at males 89 Web glossary 


Flash 3, Fireworks 2, Beyond Press 4, Home 
Page 3, NetObjects Fusion, ImageStyler, ae 
PageMill 3, PhotoTools Es visualPage (al Mac- : 44] Home Page 3 eee ee ers pied 
and-PC); Xara3D (15-day trial), Allaire Homesite, _ FileMaker Home Page is one 92 CD'interactive 
HoTMetal Pro 5 (PC only); Freeway 2 of the most accessible page Get the best from your CD. 
and Electrifier Pro 1.0 (Mac only). designers available, and the 96 On-line resources 
Demo software: DeBabelizer Pro, Headline Studio (dual) and price is right, too. Here’s how 

BBEdit 5 (Mac only). Freeware: Hyperceive (PC only). to use It. : lees 
Web links: 45 of the best Websites, directly from the CD. 9 Compression tutorial ei bale cat al a 


i ! 
Plus: Software resources and all the tutorial files you need Every graphic and animation 99] in Fine ee 
to complete the array of tutorials provided. on the Web has to be small- We're giving away Fireworks 2 
here are some techniques. Flash 4 & Dreamweaver 2! 


the brand new release so hot! Plain English explanations 


45 links to the best on-line 
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DESIGNING FOR THE INTERNET IS A CONSTANTLY EVOLVING 
AND JOYOUS MINEFIELD — YET IT’S SOMETHING THAT ANYONE 
WITH THE RIGHT TOOLS AND A MODICUM OF DESIGN TALENT 
CAN DO. THIS FEATURE OUTLINES HOW THIS MAGAZINE CAN 
HELP, AND SETS CLEAR THE FUNDAMENTALS AND LEVELS 

THAT WILL GET YOU UP TO SPEED... 
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ou already know that the 
World Wide Web, and the 
communication and 
y commerce possibilities of the 

Internet are a huge and fascinating 
topic, and one that frankly — however 
much information we crammed on the 
pages and CD-ROM - we couldn’t do 
full justice to in a 100-page Computer 
Arts Special. 

Being the daughter of Computer 
Arts magazine — and knowing how 
creatively driven you are — we’ve held 
off from covering the commercial 
concerns. Assuming that guides to 
getting your site hosted and promoted 
is someone else’s business, and 
instead we’ve decided to stick to what 
we do best. We’ve restricted ourselves 
to the processes, techniques and tools 
involved in Website content creation 
and intelligent, quick, interactive, 
animated design — and that’s a 
massive, constantly evolving and 
joyous minefield in itself. 


Evolution and diversity 


Throughout the world of design, 
technology has developed at an 
increasingly dramatic rate. But that 
rate is — roughly speaking — hand-in- 
hand with the evolution and diversity 
of designers’ ideas, their clients’ 

demands and, most importantly of 
all, the potential audience’s 
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Fundamentals: Design & navigation 


New medium, old skills — keep it simple, keep it fun and you’re half way there... 


> What you've got to think about: clarity, 
interactivity and download times. Visitors 
want your site to be fun and easy to use, 
and quick to show up in their browser. 


> Don't forget that most people DON'T 
have a 1024x768 res, 18-inch monitor 
with Internet Explorer 5 onaPll,anda 
56K modem to boot. 


» Simple is almost always better, and 
the Web's no exception. Resist the 
temptation to get carried away with 
fonts, colours and flashy-bleepy stuff. 
Choose your elements, coin a style and 
stick with it throughout — it gives you 
identity as well as elegance. 


» Make your navigation controls the 


same on all your pages. It’s easier for 
everyone — including you —and ideally 
your visitors can see straight away where 
to go for what they want. 


> Get all the important hits and headline 
material at the top of every page, where 
you're sure all your visitors can see it 
without scrolling. Lots of them will just 
tread what they can see, and then move 
on to another page — unless you've 
persuaded them the rest is stunning. 


> The further a link is from your 
homepage, the less hits it will get.So 
don't bury important links at the bottom 
of a page, six folders deep. Get them up 
in the main pane of your front page — it’s 
obvious, but still easily overlooked. 


Get started in... GoLive 4 


The all-new, revamped, rebadged CyberStudio, now dual-format in the hands of Adobe... 


@ Use GoLive to design Web pagesand messing about with DHTML. GoLive will 


organise your site. It’s a brilliant tool, 


and has the best interface of the bunch. 


[2] You can put graphics, tables, forms 
and plug-ins on your page simply 
by dragging and dropping their icons 
where you want them. 


3) Store snips of code you expect to 
use often — your metatags, for 


instance —in your Custom palette. 
Just drag-and-drop them over. 


eo Use the CyberObjects to get some 
action on your pages without 


sort that side out for you, while you 
concentrate on the content. 


oe Some prefer to keep away from 


the Layout mode, which positions 
elements on your page like a DTP 
package. It looks good, but you'll get 
absurdly bloated code and spend all the 
time you saved in tidying it up. 


re) Take care not to use browser- 


specific code, since GoLive doesn’t 
help you out on this front as much as it 
should. Or you could get a shock when 
you see your pages in action. 


Get started in... Fireworks 2 


Vector graphics, optimisation and tools for flashy stuff, all in one superb package... 


e Use Fireworks to create and 
optimise your graphics, and to get 
some immediately impressive results 

without too much fuss. 


[2] Design your navigation bar asa 
single graphic, then use the Slice 
tool to cut out your buttons and give 
them different links in your Object 
Inspector. Click File>Export to let 
Fireworks worry about reassembling 
the bits in an HTML table. 


3) Fancy some rollovers? Before you 
slice your buttons, duplicate the bar 


in your Frames Inspector and make 
mouse-over changes to each button in 
the second frame. Slice ‘em up, assign 
your links, and use your Behaviours 
Inspector to set up each rollover. Then 
use File>Export to do all the tough stuff. 


C4) File>Export will take you to an 


optimisation dialog, where you can 
fiddle the settings to get your graphic 
downloading quick. You can compare 
option side by side, which is a boon. 


oe If you've got Dreamweaver too, raid 


Fireworks’ export engine direct from 


Be prepared to design for smaller 
screen-res widths. If you don’t want to 
use re-flowing text, put your content in 
a table, specify its width in pixels and 
have it centred in the window. This 
looks good on larger screens too, like 
this page at w www.head-space.com/ 
virus/luminus.html 


It’s a good idea to check out your pages 
on as many platforms, monitors and 
browsers as you can. Special>Show in 
Browser helps you out on the last front. 
Expect to make good use of the facility. 


Fireworks is 
regarded as 
offering the 
best 
compression 
available. 

Good job too, 
because once 
you get started 
you could be 
tempted to cook 
up whole pages 
in here, asa 
single graphic. 


its menu bar. Working this way there’s 
no need to even open Fireworks. 


web design special | computer arts | 07 


< web ne 


getting up to speed > 


Fundamentals: HTML tips 


HyperText Markup Language sounds like hard work, 
but it all becomes clear once you get the idea... 


> HTML is geared around tags — chunks 
of information you add to text to 
dictate how it should be displayed. For 
example, <b>Put your text here</b> 
shows your text in bold. 


> Most tags also need a close tag, such 
as </b>. Notable exceptions are line 
break <br>, horizontal rule <hr> and 
image <img>. 


> Most tags are fairly obvious. For 
instance, <center><b><font face="arial" 
size="20" color="blue">Put your text 
here</font></b></center> will give 
make your text appear as centred, bold 
type in 20-point blue Arial. 


> Put <html> at the top of your 
document, and </html> at the bottom. 
In addition, keep everything you want 
to actually appear on your page within 
a <body> and </body> tag. 


» As HTML steadily grows up, browsers 
are becoming less tolerant of mistakes 
-a misdefined column or missing 
quote marks, for example. Get yourself 
a good HTML reference book, and first 
check that it says what’s compatible 
with which browsers. 


> Even if you use a WYSIWYG editor, 
taking time to tidy up your HTMLis a 
good practice to get into. The more you 


There’s a number of good HTML 
reference sites on the Web. The 
definitive is the World Wide Web 
Consortium’s at Ww www.w3.com 
Here’s the W3 homepage, and its 
HTML code. 


fiddle about with things in your 
WYSIWYG package - which you'll 
almost certainly do a lot ofthe more 
redundant scraps of code you get 
lurking about. You'll find WYSIWYG 
package on page 83. 


» Use Metatags to identify your site to 
search engines, with a description and 
keywords — for instance, <meta 
name="description” content="Blah 
blah blah">. You can also use metatags 
to automatically open files when your 
page loads, or refresh the browser to 
another page. Put metatags within a 
<head>...</head> tag, above your 
<body> tag. 


Get started in... |lmageReady 


This package makes polishing Web graphics a breeze... 


@ Bring graphics files into 
ImageReady for tweaking — such 
as adding text or a drop-shadow — and 


use the Optimise palette to get them 
downloading quick. 


[2] Use your Live View window to see 
exactly how your graphics will 
look in action, then take time to 
experiment with the settings. 


oe Compare what you see to the file 
size and download time given at 
the bottom of your window. 


oO Click View>Browser Dither to 
check what your graphics will look 
like on a 256-colour monitor. 


(5) If you're making slices or 
imagemaps, make sure you get 


graphic literacy. While this model can 
be applied fairly widely across design, 
nowhere is it more pertinent than in 
designing for the Internet. 

Of the four factors — technological 
possibilities, designers’ invention, 
clients’ demands and viewers’ 
expectations — any Website designer 
who wants to cut the mustard must 
have a fairly reliable handle on each. 
That's not to say that if you've got one 
or two nailed but have barely a clue on 
the other there’s no hope for you. 


Fundamentals: Streaming audio & video 


Sound and action on the fly — get things moving before your viewer nods off... 


» Sound and video are fun, but the 
Internet was originally devised and built 
to handle hypertext and the odd image, 
and is slowly struggling to shake off 
those roots — so right now you're in for 
some fiddling about. The concept of 
streaming is essentially to get the action 
running straight away, without waiting 
for a download to finish. 


> Anything that happens without your 
visitor's say so is generally irritating and 
to be avoided. And vice versa - anything 
that doesn’t happen when they want it 
to, generally doesn’t go down so well. 
First, give them buttons to play with, and 
second, make sure it all works. On this 
count you'll have to give some thought 
to which formats you use. 


> The fab four formats are: 
RealVideo or RealAudio — quick and 


Designer Greg Shaptor’s homesite at 

Ww www.vacantstare.com is a great 
example of video done well on the Web, 
where he posts short animations of his 
3D projects. A lot of Websites over- 
estimate what’s possible for 90% of 
their visitors. 


popular but generally not the best 
quality available; 

Windows’ native AVI —it’s popular but 
slow, no streaming and obviously an 
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inconvenience for Mac-users; 
QuickTime — version 3 streams, but 
you'll have to pay for the kit; 

MPEG —small, fast and canny, it’s used 
for DVD and MPEG 2is the best 
supported version. 


> Smaller really is better —- however 
grand your plans are, you're not going to 
get a full-screen feature film to work on 
your site. Keep things small and short, 
make the action obvious — subtleties can 
be lost in compression —and do try give 
your video a point. 


>» You can use software such as Adobe's 
AfterEffects or Equilibrium’s DeBabelizer 
to chop out alternate frames, reduce 
your colour count and so on. Anything 
at all you can do to reduce the file size 
without destroying your video is going 
to make your viewers happy. 


Kill two birds: use the tweaking tools 
together with batch processing to 
label and ship out all your buttons in 
one go. 


ImageReady to do the donkey work for 


you: it helps to check ‘Save HTML File’ in 
your Save dialog. 


Expert advice 


Learning the ‘missing bits’ is 
absolutely vital, but of course it’s 
neither a science or a finite process — 
you'll need to keep abreast of the 
latest software and hardware 
developments, stay in touch with your 
viewers and have a close eye on the 
competition. What are the best online 
designers coming up with? How are 
they taking advantage of the new 
bandwidth possibilities, the latest 
compression routines, the constantly- 
improving WYSIWYG packages? How 
are they serving their clients, their 
viewers and themselves? That's where 
this magazine comes into its own — 
we've distilled these ideas to bring you 
a potent brew... 

Headlining are Showcases of five 
of the UK's very best new media and 
Internet design companies — but these 
are more than your standard profile 
features. We've sat down with the 
creatives themselves and persuaded 
them to reveal their secrets, walking 
you through the processes involved in 


Cia 


Get inspiration from the best Website 
designers in the business. Subnet 
produced this Website for Wotsits, 
amongst others. Plenty more examples 
on page 22. 


e-mail us 


Motion Pixels’ w savetherhino.co.uk is 
a good example of how to manage a 
reasonably large amount of copy ina 
Website using Macromedia Flash’s ‘Load 
Movie’ command. See page 52. 


BMW in the UK. 
Contents 


Th 


Products 
ay and Services 


information 
Service 
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Top new media design firm AKQA 
produced BMW's Website - and give the 
lowdown on its 3 Series infomercial 
within - see page 36 for the full story. 


In Deepend Design’s award-winning 
Hoover Website, “Essential product 
information is delivered through a highly 
intuitive interface” See how the job was 
done on page 72. 


producing some of the finest elements 
of their latest sites. 

These Showcase walkthroughs 
are bolstered by a series of Technique 
Tutorials. Here we've identified some 
of the most important techniques — 
based around technology, software, 
browser compatibility and general 
design maxims — that everyone 
designing for the Web needs to know, 
and that can be applied across a wide 
range of software packages and on any 
platform. We all need to be reminded 
of the importance of topics such as 
colour palettes, navigation, interactivity 
and animation. 

Punctuating the Technique 
Tutorials are a set of software-specific 
Walkthroughs. We've picked out, from 
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Fundamentals: Optimisation & compression 


You really want to use your favourite 2MB graphic as a background — but let’s get realistic... 


It’s pretty much a case of size v quality, and GIF v JPEG. Here we’ve taken the same original image (/eft) and compressed it 
(using NetGraphics Optimiser) as a JPEG, then a GIF - you can see the difference for yourself. 


» Download time is boredom defined, 
and 3K per second is fairly realistic fora 
lot of people — whatever the optimists 
say. Think about who you want to visit 
your site, and get real about what kit 
they're likely to have and how long 
they'll wait for your page to load. 


> Put all your flashy (and presumably 
relatively large file-sized) elements in 
the sections that repeat on every page — 
headers, bars and so on. Your visitors 
only have to download a file once, and 
(in theory at least) their browser caches 
it on the hard drive, opening it from 


there next time it’s needed. Use this 
technique whenever you can. 


> Compress your files as much as possible. 


It’s a straight trade-off between quality 
and size, but using a decent application 
to do the job can make a significant 
difference. As does considering what 
compresses well when you're creating 
your graphics. 


> GIFs are generally good for simple 
graphics with plenty of solid colour. GIF 
compression works by reducing the 
number of colours coded into your 


Get started in... Fusion 4 


This authoring package is popular with businesses — it’s 
well organised and ideal for using with databases 


Fusion’s Site View feature is 

brilliant for planning and 
structuring your site —just highlight a 
page, and click New to have a new one 
linked to it. 


r2) Head for your Style Editor to 
create a style template for your 


site, including banners and navigation 
controls. Or use a preset. It'll save you 
formatting every page. 


(3) Use the Text mode like a word 
processor to get your content in 
there, then switch to WYSIWYG mode 
to format it. 


Make the most of the iCAT, Java 

and JavaBeans facilities to help 
you build an on-line store or database 
—this is Fusion’s real strength. 


Fusion is ideal for developing sites 
with databases, and for commerce on 
the Web. And you don’t need CGI 
programming skills. 


Cs] Fusion doesn’t generate HTML 
until you chose the Publish 
command. This means you can get on 
with designing, and let Fusion worry 
about browser compatibility later. 


image, and making up the difference 
with dithering. Hence too gradients, 
textures and blurry stuff don’t “GIF- 
down” particularly well. You can use up 
to 256 colours, but aim for 16 and you're 
on the right track. 


> JPEGs are good for photos and those 
washy, natural images that all computer 
artists love, but which looks terrible as a 
16-bit GIF. JPEG compression works by 
flattening areas of similar colour into 
one colour, and you can get away with a 
degree of flattening before things start 
looking wobbly round the edges. 
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In association with... 


macromedia’ 


Alia s| wavefront 


A SiliconGraphics Company 


CU 


COMPUTERS 
UNLIMITED 


& MetaCreations 


The Visual Computing Software Company 


the myriad possibilities, some of the 
most important and popular titles that 
help you generate certain elements 
and bolt them all together. While 
there’s a lead walkthrough on 
designing sites in the professional’s 
choice, Dreamweaver 2, there’s also 
another walkthrough in site building, 
this time in the accessible, entry-level 
package, Claris Home Page 3. Top 
that up with Fireworks for graphics 
optimisation, Flash for animation and 
RealMedia for streaming audio and 
video and you’ re getting there! 


It doesn’t stop here... 


Of course, no Computer Arts 
walkthrough is complete without a 
software demo and tutorial files on the 
CD-ROM, so take time to try out each 
the applications provided. Along with 
the seven fully-working time-bombed 
packages there are a host of other 
software demos, and in the 
magazine’s Interactive pages you'll 
find mini-walkthroughs for Adobe’s 
‘other’ layout application, PageMill, 
esteemed HTML editor HoTMetaL Pro 
and interactivity tool, Electrifier Pro. 
Read the ‘Fundamentals’ and 
‘Getting started’ boxes within this 
feature — if you already know it, there’s 


computer | 


Britain’s biggest-selling cre. 


and 22nd of September. 


Get started in... | 


Dreamweaver 2 


Dreamweaver 2 is the best WYSIWYG authoring package 
around —there’s a learning curve and we'll help you up it... 


@*) Put elements on your page 
& quickly by drag-and-dropping 
their icons from your Objects palette. 


© Select an object and use the 
Properties palette to quickly 
adjust its formating, links and so on. 


© If you've got a quick design 
& outline for your page, import it via 
the Tracing Image function as a guide 
for laying out your page. It’ll appear in 
the background. 


4 y Drag your Point icon straight 
” onto another open document to 
make a quick link to it. 


[s) See how your design looks for 

& different monitor sizes — simply 
click the Window Sizes launcher in 
your status bar. 


absolutely no harm in being reminded, 
and if you don’t... well, you do now! 
But the information doesn’t stop 
at the confines of the magazine and its 
CD. We’ve compiled the best online 


Familiarise yourself with the interface 
and it’s a pretty simple business 
making Web pages - everything you 
need is at your fingertips. 


MA) Hitting Fiz shows your page in 
Navigator, and control-F12, or 


command-Fi12 on a Mac, shows it in 
Internet Explorer. 


resources list for the Web designer, 
and hotlinked to their URLS direct 


| from our CD interface. Get going, 


experiment with the tools, and don’t 


| forget to enjoy yourself! Gg 


During the Autumn Computer Arts will be 
packing its bags and going out on the 
road for a new live event — Computer 
Arts Live. \t will be at The London 
Business Design Centre on the 14th 
and 15th of September and in Manchester at the Town Hall on the 21st 


At the event, you have the chance to see and try brand new software & 
hardware, get some worthwhile tips from our live tutorials, and be able to 
meet and ask questions of key design and industry figures in many 
seminars which will cover graphic design, image manipulation, 3D and 
animation, illustration, multimedia, digital video and Web design. 

It's £16 on the door, but advanced bookings are only £14, while 
Computer Arts and Computer Arts Specials subscribers get a further £2 
discount with tickets at £12 (advanced bookings cost £1 per booking). 


To order, go to w www.computerarts.co.uk or call t01369 708 011 
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IT ALL BEGINS WITH HTML, BUT YOU CAN GO MUCH FURTHER — BUT IS JAVA 
REALLY WORTH THE BOTHER, AND WHAT CAN DHTML OFFER? 


ith the HTML 4.0 specs 

now widely used, the 
language has moved 
from being a simple 
scripting protocol for hypertext to a 
powerful layout and interactivity 
standard. Most of that power doesn’t 
actually come from HTML itself, 
though — it comes from its ability to 
integrate and interact with other 
languages and standards, and objects 


WwW 


like Java applets, Style Sheets and standards, and shows you how to use 
plug-ins. Using applications such as them without resorting to a text editor. 
Adobe’s PageMill and Macromedia’s 

Dreamweaver, it needn't be difficult to 


: What’s Java then? 
integrate more advanced elements into 


your pages. In fact, to get your site Java is a full programming language, 

| noticed among the growing throng of | similar to those used to write 
professionally-produced pages, it may commercial applications. Its main use 
well be essential. Part three of our site so far has been for the production of 
building series looks at some of the | small Web-based applications called 
advanced Web languages and ‘applets’. Some of these applications — 
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Jargon buster 


JavaScript 

Uncompiled scripting language, 
developed by Netscape and Sun 
Microsystems, that integrates with 
HTML to enhance interactivity. 
Nothing directly to do with Java, 
despite the name. 


VBScript 

Microsoft's attempt to steal 
Netscape’s thunder —a scripting 
language spookily similar to 
JavaScript, based on Visual Basic. 
Useful, but still largely ignored 
by Web developers. 


SGML 

Mark-up language for electronic 
documents that is the precursor 
to both HTML and XML. 


Plug-in 

Both Netscape Navigator and 
Internet Explorer enable you to 
display non-standard content in 
your Web pages using plug-in 
applications, small programs that 
read specific formats and display 
or play them ‘in-line’. 


Applet 
Small application written 
in Java or JavaScript 
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Geraldo Garcia’s resumé includes DHTML 
animation and JavaScript, proving that 
you can combine advanced scripting and 
design. Go to w www.sminteractive. 
com/garcia/openMe.html 


like ‘live’ chat clients and newsgroup- 
style forums — have caught on, while 
others, notably those that display 
animations or simply create ‘clickable’ 
buttons, are still often too 
cumbersome to be valuable. 

The clever bit about Java is that 
it doesn’t run directly within the 
operating system on your computer. 
It runs in a software-powered ‘virtual 
computer’, specific to the platform 
you're using — though its potential as 
a cross-platform 'Net-enhanced 
programming language is yet to be fully 
realised. The good news is that if you 
only need to use Java for interface 


Macromedia's DHTMLzone at 

Ww www.dhtmizone.com remains one 
of the most comprehensive and least 
browser-biased resources for the 
advanced version of HTML. 


design or building Web pages, you 
don’t need to be a programmer. There 
are a number of authoring tools, aimed 
at designers, that will generate Java 
code for you. 

Unlike Java, ActiveX isn’t a 
programming language — it’s a 
standard for the creation of small 
applications that are designed to do 
one thing (create a pop-up menu, for 
example), and that can communicate 
with each other and other programs. 

In the year or so that ActiveX has 
been available to the Web community, 
the technology has largely failed to 
deliver its early promise — mainly 


JavaScript in Dreamweaver 


Dreamweaver includes a range of JavaScript-powered ‘Behaviours’ that make it 
easy to include interactive functions in your pages — including animated buttons... 


Go back to our original 
navigation bar image (an image 
map in early versions of the site). First, 


we cut the graphic down into a series of 


individual buttons, then cut a section 
15-pixels wide from the left-side of 
each. We used this section to create 
two new images, a simulated LED with 
an ‘on’ state and ‘off’ state. 


In the Swap 
Image dialog 
box we selected 
‘ledoff1’ as the 
image to be 
affected, then 
browsed for the 


second image on the 
local machine’s hard 


drive - the LED ‘on’ 
image we made 


earlier. We repeated 


this process for 

each button in turn. 
When previewed in a browser at this 
stage, the LEDs we’ve created on the 
buttons ‘light up’ when the user passes 
the mouse over them. 


Co. Using an 
invisible table 
with cell padding 
and spacing set 
to zero (plus 
individual cells for 
each button), we 
first ‘rebuilt’ the 
original single 
image with 
individual button 
graphics and using 
the ‘off’ state LED 
image. We then 
attached the original page links back 
to the buttons using the Properties 
Inspector so everything would work. 


Behavior 


Swap Image 
Display Status 


We had to add a second image- 
swapping script to restore the 

button back to its original state after 
the ‘OnMouseover'’ action. Choosing 
‘OnMouseout’ as the trigger event then 
‘Swap Image Restore’ as the following 
action does the trick. This was applied 
to all the buttons in the navigation bar. 


Ww www.xmi.com sorts out some of 

the confusion about the latest Web 
language XML. Keep an eye out for the 
release of the first XML authoring tools 
for non-programmers at this site. 


because of its lack of cross-platform 
compatibility and the absence of 
support in non-Microsoft browsers. 
Indeed, despite aggressive measures 
from Microsoft, Navigator is still 
number one among Web surfers. Take 
note, though: if Microsoft survives its 
run-in with the Department of Justice 
over Windows 98, the days of 
Navigator's lead may be numbered, 
and this is when Activex-enhanced 
Web pages may make a comeback. 


Dynamic HTML 
Though Cascading Style Sheets and 


image, 1K 
lledofft 


The LED ‘off’ images were given 
unique names in the Properties 

Inspector (ledoff1-7) so that we could 
refer to them using JavaScript, applied 
in the Behaviours Inspector. Selecting 
the first button in the sequence we 
chose ‘OnMouseover’ as an event, then 
‘Swap Image’ as an action. 


Oo Finally, 
because 
using the ‘ALT’ tag 
to trigger context- 
based labels to the 
buttons gets in the 
way of the LED 
animation, we set 
up a script that 
would display the 
function of each 
button in the 
status bar. To do 
this we chose 
‘OnMouseover'’ as the trigger event and 
‘Display Status Message’ as our action 
- we then had to type a different 
description for each button. 


Build a Skeleton 


incorrect! 


ei 


Jamba deserves an award for being a 
Java authoring tool that’s actually 
useful. Take a look at the well-produced 
support site at w www.jamba.com, home 
to a 30-day trial version. 


JavaScript are very different Web 
protocols with different origins, the 
advent of Dynamic HTML in the latest 
versions of Navigator and Internet 
Explorer has brought much of their 
functionality together. 

JavaScript is Netscape’s open 
scripting protocol for coding 
interactivity into Web pages; while 
Cascading Style Sheets enable Web 
designers to control the appearance 
and position of elements throughout a 
page. Dynamic HTML, in both Microsoft 
and Netscape flavours, enables coders 
to identify and control these elements 
on-the-fly from within the page’s script 
— introducing a range of new tags in the 
process. Though both major browsers 
implement a protocol called Dynamic 
HTML that behaves in similar ways, 
there are two versions — one that’s 
compliant with Navigator, the other 
that works with Internet Explorer. 

DHTML has the potential to be the 
most effective interactive multimedia 
language on the Web, but divergence 
between the two formats has left Web 
designers confused. Almost a year on 
from its initial introduction, there are 
few examples of practical DHTML use 
on the Web. Instead, JavaScript 
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Java is it the language of the future or just annoying? 


o you get a shiver of anticipation 

when you see the words ‘Loading 
Java’ in your Web browser? It’s probably 
more likely to be a shiver of anxiety, 
knowing that your computer has a 
50:50 chance of crashing very soon. Yes, 
we're exaggerating, but both Netscape 
and Microsoft have been guilty of 
releasing buggy Java integration in 
the past — and not all amateur Java 
programmers are too fussy about the 
state of their code either. 

There is lots of shareware and 
freeware around that enables you to 
produce useless Java applets. Finding 
tools that are actually productive is 
rather more difficult. HotChilli, for 
example is a utility that enables you to 
create entirely pointless scrolling text, 
fading logos and ‘LED’ displays to insert 
into your Web pages. You can also make 
Java-powered drop-down menus with it 
—if you see that as a saving grace 


continues to thrive as the key ‘add-on’ 
to HTML. Much of the hype about 
DHTML stems from the fact that it 
transforms HTML into an object- 
oriented scripting language. The next 
generation scripting definition protocol 
‘XML’ (see the box on page 34) may well 
replace this with a similar standard 
that works on both browsers. 


Flash and Shockwave 


The most successful of the advanced 
protocols hasn’t come from either of 
the browser manufacturers or the 
World Wide Web Consortium, but from 
a company famous for its multimedia 
authoring tools. Macromedia bought up 
Future Splash, and with a swift revamp 


tive EK Home 


Create dynamic and interactive web pages 
quickly and easily with LiveFX! 


You can download LiveFX, something of a budget alternative to the highly-specified 
Jamba, by heading over to w www.netrax.net/~egrove/LiveFX 


| 
| 
| 


download it from w www.ozramp. 
net.au/~maxzmije/index.htm 

Jamba, on the other hand, has had 
positive reviews in Computer Arts and 
elsewhere as a good example of an 
application that puts Java to work 
effectively without the need to 
program. It’s basically a multimedia 
authoring tool that outputs 
presentations as Java. Though easy to 
use and highly featured, the applets it 
produces take some time to download. 
Find more info and on-line examples at 
Wwww.jamba.com 

You can plug ready-made Java 
applets directly into your pages using 
a drag-and-drop authoring tool like 
Dreamweaver or PageMill. The best 
source on the Net for freshly-brewed 
Java apps remains Gamelan, now 
hosted by w www.developer.com — 
cruise along to w www.gamelan.com 
to be directed to the new address. 


Flash is now one of the fastest growing 
non-HTML authoring-tools. Capable of 
producing small, fast, vector-based 
interactive animations, its uses range 
from creating banner designs, to 
complete Web solutions. 

The success of Flash seems set to 
continue with its projected inclusion in 
Navigator 5, plus Flash 3's ability to 
produce Java-powered plug-in-free 
content. Flash Web animations are a 
subset of Macromedia’s Shockwave 


“DHTML has the potential to be the most 
effective interactive multimedia language on 
the Web... but after almost a year, there are 
few examples of its practical use...” 


4-Tris 


An adaptation of your favorite game. 
This game runs on both Internet 
Explorer 4.0 and Netscape Navigator 
4.0. 


NewGame | Close | 


www insideDHTML com 
Fun and Games 


Level: 1 Score; 2 


J - Move Left 

L - Move Right 
I - Rotate 

K - Rotate Right 
<SPACE> - Drop 


Great Job! 


You can plug all sorts of ready-made Java applets straight into your Web pages — we 
found this entertaining little version of Tetris when we visited Gamelan. 
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Creating a Flash splash page 


Flash produces animations that are slick, fast and ridiculously small in file size, 
making them ideal to use as interactive buttons, banners and animated ‘splash’ pages... 


octiFich 


Co. Our ‘splash’ page uses simple 
animation to create a fast-loading, 


Co. All the animation in the 
sequence was created using the 


dynamic introduction screen, combining 
illustration, text and transparency. The 
animation opens as the ‘Octafish’ fish 
swims across the screen, then the text 
logo enters at bottom left, dynamically 
re-sizes and slides into position. 


‘Tweening’ controls in Flash. This 
process enables you to specify two 
separate image states across a series 
of frames, then have Flash extrapolate 
the in-between frames along a timeline 
and render them automatically. 


Co. At Frame 10, move the image to 
the position on-screen where you 
want the animation to end. You can also 
re-size or rotate the image and apply 
colour effects at this point. Double-click 
on the first keyframe and choose 
Tweening from the tabbed dialogs. 


Select Motion from the 

Tweening menu box, check ‘Tween 
scaling’ and set Rotation to automatic 
if you’ve re-sized and re-oriented the 
image. The ‘Easing’ slider changes the 
start or end speeds of the resulting 
animation: dragging the slider towards 
‘In’ slows down the beginning of the 
transition; dragging it towards ‘Out’ 
slows down the end section. 


To create tweened animation, 
start with a single image, group 
or symbol on a single layer. By default 
there is a keyframe at Frame 0: right- 
click in the timeline to create a second 
keyframe further along at Frame 10. 


To put the animation in your Web 

Page, you can use Aftershock to 
avoid having to write any code (it’s 
bundled with Flash 3). First, export the 
animation as a Shockwave Flash file, 
then launch Aftershock to define 
parameters like HTML layout, looping 
control and Flash format. Aftershock 
creates browser-specific code, plus 
multiple versions of your Shockwave 
file to guarantee compatibility. 


success story — a protocol that 
originally enabled Director-produced 
content to be placed into Web pages. 
In the latest versions of its authoring 
and design tools (including Director 6), 
Streaming Shockwave technology has 


removed many of the concerns originally 
voiced about file sizes. Streaming 
Shockwave Director movies play as the 
file is downloaded, meaning less of a 
wait for whoever's at the other end. 
But why go beyond HTML? Well, 


line of code, the main limitation is your 
imagination. Remember, though, your 
choice of language or standard should 
be governed by your overall design, not 
by a desire to ‘soup-up’ your Website. 
There are thousands of amateur sites 


“Produce a site with eye-catching content and 
interactivity without typing a line of code, and 
the main limitation is your imagination...” 


initially the answer is that in the 
competitive Web market, it’s important 
to get yourself noticed. If you produce 
a site with a range of advanced ways to 
include interactivity and eye-catching 
content in your pages without typing a 


XML the next generation of Web languages 


r } ust when you think you've got a handle on all the browser 
variations of HTML and its latest ‘Dynamic’ incarnations, 
along comes an idea that could change the way we approach 
building Web pages entirely. XML (eXtensible Mark-up 
Language) is similar to HTML in that it uses encapsulated tags 


with additional parameters to describe content. 

The main difference between the two is that while HTML is 
a scripting language with a range of predefined functions, XML 
enables you to define new functions starting from scratch — 
and by extension, create your own specific new mark-up 
languages to suit individual tasks. There are several task- 
specific scripting languages that are XML-compliant already 
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doing the rounds on the Web, and of these Microsoft's CDF 
(Channel Definition Format) is the most high profile. 

XMLisn’t likely to replace HTML - rather, it will be used to 
harness the power that already exists as part of HTML, DHTML, 
JavaScript, VBScript, Cascading Style Sheets, PostScript 
formatting, Java and Activex controls. Indeed, it will act asa 
flexible container for all these languages and protocols. XML 
is likely to be of most value to people that supervise large 
Websites, who will be able to use it to create a custom mark-up 
language to design and maintain their pages. 

Internet Explorer 5 and Navigator 5 should both support for 
the format. For the full XML specs check out w www.xml.com 


out there with useless Java banners 
that take aeons to download, pages 
crammed with pointless Shockwave 
games and annoying JavaScript ‘alerts’ 
popping up all over the place. 

The best Websites integrate new 
technologies seamlessly with HTML, 
and only use them because the same 
results aren’t achievable or are slower 
or clumsier in plain script. Our example 
site uses JavaScript to enhance the 
interface of the interior pages, plus 
Shockwave Flash to create an inviting 
‘splash’ page — and leaves it at that. 

Our choice of Flash and JavaScript 
reflects our desire that the site should 
remain compatible across platforms on 
different browsers, while considering 
speed of download at all times. In your 
site you may have different priorities — 
as always, the key consideration is 
fitness for purpose. El 


How good does your 
web site really look? 
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PANTONE 
MATCHING 
SYSTEM 


When creating your web pages how can you ensure that no matter who views your page they will see the colours 
as you intended? Have you ever wanted to achieve accurate representation of your corporate colours online? 
Both can now be realised on Macintosh and Windows platforms with PANTONE® ColorSuite® for Internet. 


PANTONE ColorSuite for Internet 

Whether you are a specifier or creatively designing for the 
World Wide Web and multimedia, this suite contains the 
essential tools you peed must have! 


PANTONE Internet Color System™ Guide 

Need Internet safe colours but only previously seen them on 
screen? Now you can see them as a printed guide allowing 
you and your clients to easily identify and specify the colours 
wish to use. The PANTONE Internet Color System Guide is the 
only printed guide displaying the 216 web safe colours 
along with their RGB, HTML and screen CMYK values. 

These 216 Web. safe colours are also supplied in a digital 
colour picker allowing you to incorporate them from within 
your favourite web authoring software such as Macromedia 
Dreamweaver™, Adobe Golive™, Claris Homepage™ plus 
many other leading Web design packages. 


PANTONE® Digital Color System™ Guide 
Aprinted guide that contains the 1012 PANTONE MATCHING 
SYSTEM® Colors with their RGB and HTML values on coated 
stock complete with a digital colour picker to use in your 
WWW design software allowing you to integrate PANTONE 
Colors into your favourite web authoring software. 


PANTONE Personal Color Calibrator ™ (P2c2™) 
Now you can optimise the colour on your monitor,no longer 
do you need costly instrument-based calibration systems to 
achieve colour accuracy on your monitor. 

Five minutes is all that it takes to follow a series of simple on- 
screen steps to generate a ColorSync®/ICC or ICM profile 
that takes into account viewing conditions, control settings 
and video card adjustments for your monitor. P2C2 Creates 
a ColorSync/ICC or ICM profile which accurately describes 
how your monitor displays colour. 

P2C2 also allows you to achieve "True Internet Color" when 
view or creating Web graphics. 


Save £35 with the PANTONE 
ColorSuite® for Internet 


The PANTONE ColorSuite for Internet includes everything 
you need to get consistent colour for the Web. All this 
together with a useful manual on working on the Internet 
including the unique PANTONE Internet safe mouse mat. 
Your very own mat with the full 216 Internet safe colours 
displayed by your hand! 

Saving over £35 on purchasing these products separately 
PANTONE ColorSuite for Internet is a must for both the pro- 
fessional and home web designer. 


* 
PANTONE ColorSuite for Internet £79 
Dual Platform - MacOS & Windows 95/98/NT 
* ex VAT 


available for 
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total Please debit the following credit card: 
| would like to order ...... PANTONE ColorSuite for Internet @ £79 plus VAT £...... : MasterCard C1 Visa] ~~ switchO 
Next day delivery £9.95 Carrel uinibietis-tetisvsacccstccsccsacpcostectecscsencacnasacn 
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For more information on PANTONE Colour Solutions call Digital Toolbox on 0181 961 6622 or email 
pantone@digitaltoolbox.com, to order fill in your details above and fax this form to 0181 961 6633 
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Dreamweaver 2 


THE ORIGINAL DREAMWEAVER WAS A REVOLUTIONARY AUTHORING TOOL, 
AND V2 IS EVEN BETTER. HERE, WE’RE GOING TO BUILD A PROMOTIONAL 
WEBSITE, USING SOME OF THE OLD AND A BIT OF THE NEW... 


reamweaver s popularity 
has been built on the fact 
that it was the first 
WYSIWYG HTML editing 
package that promised not to alter 
your HTML. The new version was 
recently released and introduced 
some great features, many of which 
have been included in this tutorial. 
The ability to create a design in 
Photoshop or Fireworks and then trace 
over it in Dreamweaver is very useful. 
Even though designers are rarely great 
HTML fans, it’s easy to create an 


@ 


HTML layout from ‘tracing an image’ 
using layers in Dreamweaver. Then 
with one command, Dreamweaver 
takes the layers and converts them to 
tables, making the page compatible 
with almost all browsers. 

And what of the new options? 
Well, the Templates feature saves you 
considerable time: once you've got 
your basic layout, you can use it again 
and again for all your other files. A big 
advantage is being able to specify 
which sections can be changed — so 
any parts (including the HTML code) 


that you don’t want people to change, 
you simply don’t set up as editable. 

In this tutorial, we’ve also covered 
using the Library. It provides a handy 
way of being able to update sections 
that are repeated on several pages all 
in one step. In addition, we’ll also 
introduce you to animation using 
layers, and you'll be able to see how 
the new Site window looks. All the CD 
files you need are in the Tutorials folder. 


——_—__—_———— 


Dreamweaver 2 is £351. Computers Unlimited on 
£ 0181 358 5857 W www.macromedia.com 
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Stage one: Prepare the framesets & image-tracing 


To start off, go into the Dreamweaver folder on the CD, and copy the lronbridge folder to your hard drive... 


oe. To create a new site, go to the File menu and 
choose New Site. In the dialog box, type in the 
name lronbridge and choose the lronbridge folder that 
you've copied over from the CD. Click OK, then click 
Create when a box appears asking about the cache. 


on 
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Co. Click inside the left frame and go to View, 
Tracing Image and Load. At the bottom of the 
dialog box change the ‘Relative To’ to Site Root rather 
than Document. Scroll through to the lronbridge folder 
and open the Images folder. Click the file ‘buttons 
trace.gif’ and click Select. 


Click on the line dividing the two frames and in 
the Properties palette (which is displayed from 
the Window menu), change the Borders to ‘No’. For the 
column value, type in 175 pixels. 


Your Site window should be displayed. On the 
left-hand side are details of your remote site 
(which you haven't specified), and on the right, the 
details of your local site. Close the window for now. 


Co. The Page Properties dialog box appears. Type 
in the page title ‘Navigation for lronbridge’, and 
adjust the Image Transparency to 50 per cent towards 
the bottom. Click OK and the design for the side bar 
appears faded in the left frame. 


From the File menu choose ‘Save Frameset 
As’. Scroll through to the Ironbridge folder, call 
the file Frameset and click OK. The Frameset is the grid 
into which the HTML pages are placed. 


eH SeeCUH GHG] 


oS. To create the frameset for the site, go to the 
View menu and choose Frame Borders, which 
then become visible around the page. Hold down the 
Alt/Option key and click-and-drag the left vertical 
border out for the frame that contains the buttons. 


CG. Click in the main frame (to the right) and 
repeat the last two steps, this time choosing 
‘main trace.gif’ as your tracing image. Give the page 
the title ‘An Introduction to lronbridge’. This is a new 
feature in Dreamweaver 2.0 - we're going to use the 
images as guides to create the pages. 


Click in each frame and choose Save As from 
the File menu. Name the side page ‘sidebar’ and 
the main page ‘home’. Now you're ready to start adding 
the elements to the HTML pages. 
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Co. To change the background colour on the 
sidebar file, click in the left frame and choose 
Modify>Page Properties. The RGB values are written at 
the bottom of the tracing image. These translate into 
#CCCCFF in Hexadecimal (see Colour Palettes, p24). 


Click the layer handle at the top-left corner of 
the layer to make it active. Now drag the handles 
to resize the layer to fit the image - it doesn’t have to 
be exact. Then drag the layer using the handle so the 
image is in position (relative to the tracing image). 


CG. To avoid creating unnecessary cells, check 

‘Smallest Collapse Empty Cells’ and specify less 
than 10 pixels wide. Make sure the Create Transparent 
GIFs box is checked. Dreamweaver creates a table grid 
with transparent GIFs filling the empty cells. Click OK. 
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Stage two: Building the site 


The second section deals with designing and laying out your site - remember to use the files you copied from the CD 


We’re going to use layers to position the 


by version 3.0 browsers, we'll convert them to tables. 
Click the Draw Layer button in the Objects bar and 


click-and-drag to create a rectangle at the top of the 
side bar. 


images in the sidebar. Since layers can’t be read 


Click inside the layer so the cursor is flashing 
and click the Insert Image button in the Objects 
bar. Open the Images folder in the lronbridge folder and 


select welcome.gif. The image appears in the layer. 


C. Create a layer for the first button and insert 
the image ‘Ironbridge’. Resize and reposition the 
layer so that the button is in the right position relative 
to the tracing image. Then repeat the process for the 
other buttons which are called bridge.gif, jackfield.gif, 
severn.gif and blists.gif respectively. 


Once all the layers are in place, you can 
convert them to tables which are compatible with 
almost all browsers. Go to the Modify menu and choose 
Layout and Convert Layers to Tables. 


‘Weloow to 


i Ironbridge 
, Trombridge’ 


Co. Highlight the first line, then cut and paste it 
into the layer you’ve created on your main page. 
All the documents you've open are listed at the bottom 
of the Window menu. Highlight the text and change the 
Font to Verdana, Arial, Helvetica, and the size to four 
using the Properties palette. 


C. Now Save the Sidebar file again and you’re 
ready to start working on the main page. Click in 
the main page and create a layer for the Intro text. 
Open Ironbridge Gorge.txt from the lronbridge folder. 
Make sure all the type files are .txt files. 
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with being the 
place where the 
industrial 
revolution started. 
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and mining. Given ail this industrial activity th 
pollution in Ironbridge up until the end of the last 
century was appalling. The fectories have now 

.d and the small town has reverted to 
quiet and picturesque. Ironbridge was 


Draw another layer for the main section of text 
and cut and paste the rest of the text into the 
layer. Change the font to Verdana, Arial, Helvetica and 
the size to 3 using the Properties palette. 


Ironbridq 
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When you turn the contact details into a library 
item, it means that when you update the library 
item, the files using it are updated at the same time. 
With the text highlighted, open the Library palette from 
the Window menu and click Create. Go to File and Save. 
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[36 Repeat this process for the cell with the image 
in (call it image) and the cell with the body text 
(call it body text). This means you have three editable 
regions. Then save the template. 


ritage Site in 1986 by 


@, Create a layer for the image and insert the 
image bridge2.jpg. Then create a layer at the 
bottom of the page and type in ‘This site has been 
created by...’, adding your own contact details. 


‘The Ironbridge 
‘Gorge Is credited 
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place where the 
industrial 
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is through seams of & 
and was created at 
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Now close the Frameset and just open 
home.htm as a separate file (in lronbridge Final). 

Go to the File menu and choose Save As Template. Call 
it Template and click Save. Now you need to define the 
editable areas of the template. 
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@. Open all the other text files (the bridge, 
Jackfield bridge, the Severn River and Blists Hill). 
Go to File, and choose New from Template. Copy the 
first line of text from The bridge and paste it into the 
Intro section of the template. Copy and paste the rest 
in the body text section. Insert the image bridge1.jpg. 
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dreamweaver 2 web special > 
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Now you're ready to convert the layers to 
tables. Go to the Modify menu, choose Layout 
and Convert Layers to Tables. Use the same settings 
as in step 16 and click OK. Then highlight the Contact 
Details text. 


‘and limestor 
last Ice age 
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G. Highlight the cell with the introductory text 
(do this by clicking in the cell and dragging out 
to the edge until the outline is highlighted). Then go 
to the Modify menu, choose Template and click Mark 
Selection as Editable. Call in Intro text and click OK. 
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o. Repeat this process to create the other 
t 


hree files, and then save them as bridge.htm, 


jackfield.htm, severn.htm and blists.htm respectively. 


Now you're ready to add titles to the pages, which will 
move in from the left when the page is opened. => 


LL 
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Stage two: continued 
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Open the page home.htm and create a layer 
. above the image. Type in the word Ironbridge and 
make it size 6 and Verdana, Arial, Helvetica. Change 
the colour to #3333FF too. Select the layer by clicking 
on the layer marker (this looks like a yellow shield). 
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You now have to detach the files from the 
templates, because we didn’t define that area as 
editable. Now open each file and repeat the process of 
creating each heading as an animation, as described in 
steps 28-30. 
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25 gl Repeat this process for the other buttons, 

specifying that each one should open in the main 
frame. Then click Save All under the File menu. Now 
you’re ready to view your files in the Browser. From the 
File menu select Preview in Browser, and then choose 
the Browser you want to use. 
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20 Go to the Modify menu and select Add Object 
to Timeline. Display the Timeline palette from 
the Window menu and you'll see two round keyframes 
under Frame 1 and Frame 15. Make sure the red 
playback head is over Frame 1, and drag the layer 

to the left so it’s off the screen. 
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23 Open the file Frameset and display the Frames 

palette from the Window menu. You need to 
name the frames. Click the right-hand frame in the 
palette, and in the Properties palette give it the name 
mainframe. Click the left frame and call it side. Also, 
check the ‘No Resize’ box. 
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If you need to change your contact details at 
‘ this stage, open the Library palette and double- 
click the Item Contact details. The text opens on a 
separate page, and you can make the adjustments you 
need to. Then click Save and it warns you that it’s 
going to update the files. 


Tronbridge 
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In the Timeline palette, check the Autoplay box 
' and hold down Play to see the heading move in 
from the left over to the right. Save the file and then 
open all the other files you've created. For each one, 
go to the Modify menu and click Template and Detach 
from Template. Then choose Save and close each file. 
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24 Now you’re ready to create the links from the 

buttons in the sidebar to the files you have 
created. In the Properties palette, browse for the Link 
and choose home.htm. Under Target select mainframe. 
This makes the file open in the main frame. 
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Click Update and check both the Library Items 
‘= and Templates boxes, then click Start. All the 
files now have their contact details updated. Create 
library items for any elements that are repeated on 
several pages, and you’re likely to update. To see the 
final site, copy the Ironbridge Final folder from the CD 
onto your hard drive and define it as a new site. Open 
the file Frameset and preview in the Browser. Now go 
and create your own. ET 


The Photoshop 
Special was a 
sell-out, and the 3D 
and Web Design 
Specials looks like 
following suit. Why 
not subscribe and 
guarantee future 
copies of the 
Specials series drop 
on your doormat? 
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The Computer Arts Specials are certainly hot property — 
with the first issue selling out in record time. There’s only 
one way to ensure you get your copy every time... 
Subscribe, and get them delivered to your door. 
This is your chance to get the next four Computer Arts 
Specials — you’ll find all the best techniques and tools 
for a variety of computer art disciplines: 


> Digital video » Photoshop > 3D > Web design 


Each issue comes complete with a dual-format CD. 


Call the hotline: 


t +44 (0)1458 271 108 
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Or fill in the form right (photocopy it if you don’t want 
to ruin your magazine), sit back and wait! 
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Digital video: Sept 99 » Photoshop: Nov 99 » 3D: Jan 2000 » Web design: Spring 2000 
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< web special subnet showcase > 


The Subnet client list is as long as your arm, and currently includes (clockwise 
from top left) The Museum of Science and Industry in Manchester, Wotsits, 
Clickworks, designer Saul Bass, System Error and Disney’s Magic Artist. 


LS 


IN 


As for the Subnet team themselves, we'll leave Art Director Brendan Dawesto 
explain... “The Subnet team now consists of 14 talented individuals brought 
together from a variety of backgrounds including programming video games, 
Photography, printing, electronics and illustration, with a couple of wayward 
students picked up along the way.” 


hen Subnet started, it was described as the ‘Sex 

Pistols Of The Internet’. “Now we’re more of a 
cross between Burt Bacharach and Beck, with a 
bit of Fun Lovin’ Criminals,” says Creative Director 
Brendan Dawes. Subnet's client list includes Disney Interactive, 
Coca-Cola Schweppes, Golden Wonder, Yahoo! & Abbey National. 

The company’s main objective is to push the boundaries of 

what can be achieved on the Web. “We want to take the Internet 


| \w 


Starting life in 1995 with one Macintosh and give it a good kickin’. To do this we push software such as 
‘“ ry) | Flash to its limits, using the latest G3s.” Experimentation is a 
and £500 — a Mac and a Monkey! c? | key element of Subnet, using programs such as After Effects 
. and Flash 3 in combination to produce truly original results. 
In four years Subnet has grown to become Subnet’s most recent projects include fun sites full of 
one of the world’s most innovative | interactive goodies: Wotsits ‘Willie’s Whopping Website’, and 
‘The Islands Of Capri-Sun’ site for Coca-Cola Schweppes. For the 
new media com panies... | latter, Subnet created the character of Capri‘Sam, your host 


around the four areas. Each island — done in Flash 3- features 
games and quizzes, all in a visually stunning Website. 

Alliances with the big names in new media are testament to 
Subnet’s quality. Adobe is set to feature the company as an 
example of a cutting-edge Web design firm (w www.adobe.com). 
And Macromedia has featured the ‘Museum of Science & 
| Industry in Manchester’ Website as a case study into how best 
to use the latest in interactive Web technology. GEES 


KL 


Contact Subnet on € 01282 616 o00 or W www.subnet.co.uk 

Then check out these URLs: W www.clickworks.co.uk W www.msim.org.uk 

W www.volvic.co.uk W www.wotsits.co.uk W www,saulbass.co.uk 

W www.systemerror.co.uk W www.disney.co.uk/disneyinteractive/MagicArtist/ 
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Modular Flash 3 MOVIES subnet shows you how! 


an 


‘= 108 We bance VO wR 


CS. When Macromedia released version 3 of Flash, 
it added a very powerful but much under-used 
feature that can make you rethink how a Website 
functions. The Load Movie function enables you to load 
in a Flash movie on top of another. With it, you can 
specify what level to load the movie into, and still 
have control of the targets and scenes within these 
loaded movies. 
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navigation 


i 
‘ WppPl sos wad | ale and | Saad | Saw tien [an | eee eae | oe 


The navigation contains the main interface 
for the site. The background of any SWF file 
that’s loaded into the main movie is not visible. When 
a button is clicked in the navigation, the On Release 
action in the button invokes a Load Movie action, this 
time loading the required movie into Level 1 - that is, 
underneath the navigation. 
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Definition | Color Effect | Actions | Template 


Co. To control this movie clip from Level 2, we use 
the Tell Target command, but specify the level 
as well as the movie clip name. For example, 

‘ level3/info’ would target the movie clip with the 
instance name of ‘info’ in the Level 3 movie. We then 
tell it to go to and play the desired frame. 


oS. The Subnet Website uses this modular 
technique to great effect. The site comprises 
three levels of Flash movies. Level 0 is the 
background, Level 2 is the navigation, and Level 1 
is used to display the contents of each section. 


This is the basis of building a modular Flash 
site using levels. But it doesn’t stop there. The 
Capri-Sun Website uses this technique, but takes it a 
stage further by using actions in one level to control 
events in another. For example, when the user clicks 
on one of the islands (Level 2), the menu in Level 3 is 
brought into view. 
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There are a multitude of ways you can use 
levels to enhance a basic Flash movie. Try 
creating a border with a drop-shadow in Photoshop 
with an alpha channel. Import this image into its own 
movie, then load this into any level above the main 
movie. Et voila! The result is a professional finish to 
any Flash composition. 
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The main movie (Level 0) acts as a container 
for all the other movies that are used. The first 
thing to do when the movie has loaded in is to put 
‘navigation.swf’ into Level 2. To do this, you put a Load 
Movie action into the first frame of the main movie. 
Why Level 2? This is so the navigation is always on top 
of any movie that loads into Level 1. 


Tot view Insert Modi control lvranes Window Help 


The menu in Level 3 contains a movie clip 
that’s given the instance name ‘info’ in the 
Properties dialog box. This movie clip displays the 
information for each island. 


oO. Why create a site in this way? Several 
reasons. You don’t need to embed every element 
of the Flash site into one movie. This way you can load 
in only the necessary information (as and when it’s 
needed), so cutting down on loading time. It enables 
you to create a site in a modular fashion: thus, 
updating or adding to a particular section means just 
dealing with the relevant Flash movie, as opposed to 
trawling through one big mother of a movie. 
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WHAT ARE WEB-SAFE COLOURS? HOW CAN YOU IDENTIFY THEM? 
AND WHY SHOULD YOU USE THEM? READ ON... 


ou’ve heard of the ‘Web- 

safe’ colour palette, with 
its magical number of 216 
colours. You've seen the 216 
colours it contains and doubtless felt 
a familiar shiver or horror that you are 
limited to a range of such garish 
colours for your Web page design. 
This may have led the more print- 
orientated designers amongst you to 
wonder precisely where this palette 


y 


has appeared from and why you have 
to stick to it. 

When designing pages for the 
Web you have to be careful that the 
JavaScript and HTML tags you are 
using are compatible with the browsers 
your viewers are likely to be using. The 
same is true of the colours you use. 
Computers have varying capacities to 
display different numbers of colours. 
Very old computers (which now 


thankfully are almost entirely obsolete) 
were only able to display 16 colours. 
Even though it has now become 
standard to sell computer systems 
that can display millions of colours 
you still have to assume that there 
are a number of people viewing your 
Web pages have computers that can 
only display 256 colours — and your 
graphics should be made available to 
that lowest common denominator. 


Identify the 216 


How to identify colours in the web-safe colour palette 
- in decimal and hexadecimal systems... 


Every colour is defined as a combination of red, green and blue values (RGB). 
These values can range from 0 to 255 where o represents no colour and 255 the 
maximum amount of colour. The colour values in a Web-safe colour have to be 
combinations of 0, 51,102, 153, 204 and 255. 


So you could have: 


These combinations will both produce Web-safe colours. 

You may find in your Web-editing package that the values are displayed using 
Hexadecimal which uses two numbers or letters to represent each red, green 
and blue value. The numbers 0-9 and the letters A-F are used (00 represents o 


and FF represents 255). The web safe colours have to be acombination of: 
00, 33, 66, 99, CC, FF. 


So the examples above would translate as: 
FForRed=00;Blue=99;Green=CC 
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In the latest version of Fireworks you can choose a colour outside the Web-safe 
palette and Fireworks will work out which are the two best colours to use to dither it. 


In ImageReady you can view a photograph as it will be displayed in the browser using 
the Browser Dither command. In other packages, view the photograph as a GIF with the 
Web-safe colour palette to get an idea of how it will appear in the browser. Make any 
adjustments you think are necessary and then export it as a JPEG. 


system don’t entirely overlap. Only 216 
of the 256 colours overlap and it is they 
that make up your Web-safe palette. It 
is known as ‘web-safe’ because if you 
use any of the colours within it you can 


The colours contained in the | 
palette of 256 are dependent on the 
operating system you are using | 
(Windows or Mac) and — naturally 

enough — the colours used by each 


“It is known as Web-safe because if you use 
any of the colours within it you can be sure 
they will display correctly on Mac or PC” 


If you are using Photoshop to create a GIF file, once you have changed the mode to 
Indexed Colour you can view the Colour table from the same menu. If you double-click 
on any of the colour swatches the colour picker appears and from here you can change 
the colour values. 


be sure they will display correctly on 
either Mac or PC. 

There are two ways those 
computers displaying only 256 colours 
deal with colours outside the Web-safe 
palette. One way is to create a dither 
effect, or if the colour isn’t generated 
using dithering it is simply changed to 
the nearest colour within the Web-safe 
palette. That is why you can choose a 
light pastel yellow for a background 
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colour, only to have it change to a 
nasty grey once you view it ina 
browser on a machine that is only 
displaying 256 colours. 

Computers limited to displaying 
256 colours can make a stab at 
displaying other colours on the 
screen. They create a pattern out 
of two colours from the palette to 
represent the third colour they can’t 
display accurately. For example, for 
a pastel pink the computer would 
combine white and a dark pink in a 
dotty pattern. This process is called 
dithering and where two contrasting 
colours are used to imply a third the 
pattern is very obvious. If the two 
colours used are similar to one 
another, the effect is subtler and 
therefore more acceptable. So you 
can use additional colours if the way 
they are dithered is not so obvious. 

All this means that the safest 
way to work is to change the display 
or monitor settings of the computer 
you are using to design Web pages so 
it can only display 256 colours. Then 
you will see your pages as many of 
your viewers will. GE 
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Colour palette 

All the colours used within a 
particular image. Monitor bit- 
depth represents the number of 
colours a monitor can display. 
8-bit represents 256 colours, 16-bit 
represents thousands of colours 
and 24-bit represents millions. 


Dithering 

A process where a random or 
ordered pattern of pixels is used 
to replace a solid colour in images 
with limited palettes. Can be 
generated on import or used 
while creating an image. 
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Saving a file as a GIF 


This is the most commonly-used and usually the smallest format for icons and graphics 


Co. GIF files can only contain 256 colours and if you can 
reduce the number of colours in the palette further, the 
file size will be smaller. To optimise a GIF file for the Web 
therefore involves carefully manipulating the palette. 


So. A Webrsafe palette on the other hand will only 
contain up to of the Web-safe colours. If you select it 
as the palette for your GIF image, any colours in the image 
that are not Web-safe will be mapped (ie altered) to the 
nearest Web-safe equivalent. 


You can specify that colours in a GIF file will dither 
when they are displayed by the browser. Be aware 
however, that setting them up to dither considerably 
increases the file size. 


Most Web graphics packages give you a choice of 
several standard packages, chiefly: Adaptive, Web 216, 
Exact, Macintosh, Windows - plus others. An adaptive palette 
contains the colours that are in the image. They won’t 
necessarily match the Web-safe palette. 


oOo Several packages give you the option to map specific 
colours to the Web-safe palette when you are looking at 
the optimised image. This enables you to leave colours that 
aren't dithering too badly as they are — you can generally 
‘lock’ them to avoid them being changed. 


CG. By reducing the number of colours in the palette you 

can reduce the size of a GIF. Once you have adjusted the 
number of colours downwards check the quality and continue 
to make adjustments until you have a happy medium between 
file size and quality. 
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Fireworks 


THE EXPLOSIVE POWERS OF FIREWORKS 2 MAY CHANGE THE WAY YOU 
DESIGN FOR THE WEB FOREVER. TIME TO LIGHT UP YOUR SITE... 


eb graphics anyone? If you want to 
create some, Fireworks is the package 
to use. The first upgrade to the original 
has just been released (we gave it five 
stars in issue 32 of Computer Arts). In it, Macromedia 
has made a number of significant improvements. 
From the start, the package has combined vector with 
bitmap editing tools. It also has an excellent Export 
palette, where you can optimise graphics for the Web. 
The latest version has introduced several time- 
saving features. First, there’s a powerful Find-and- 
Replace palette which can search through many files 
at once, changing text attributes and colours. The new 


Ww 


Styles palette enables you to save style attributes 
and apply them to other objects with the click of 
a button. Plus, the Behaviours palette produces 
JavaScript for rollovers, status messages and so on. 
You can use Fireworks as an all-in-one package 
for creating Web graphics, or as a more sophisticated 
bitmap editing tool (in conjunction with Photoshop). 
Here, we show you how to create images and rollover 
buttons — all the files you need are in the Tutorials 
folder on the CD. Get creating! 


Fireworks 2 is £210. Drop into W www.macromedia.com or call 
Computers Unlimited on € 0181 358 5857. 
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Stage one: Creating the Welcome image 


First, we'll get to grips with the eee package’s new features and create the main elements 


@. First, we need to launch Fireworks. Open the 
file bridge1.tif from the CD, and convert it toa 


-png file. Go to the Marquee tool (press M) and click- 
and-drag to create a selection. Use the Info palette to 
make sure the dimensions are 200 pixels wide by 200 
pixels deep. Then copy the selection. 


oO. In the Object palette, reduce the opacity to 
50 per cent and then go to the Xtras menu and 


Invert the picture. Create a new layer, double-click it 


and call it ‘Ironbridge text’ (don’t share across frames). 


Highlight the text and make it 64pt Century 
Schoolbook (or a similar serif font), range it left and 
click OK. Drag the handles of the text box so it fits. 


Co. Create a new file, specifying dimensions of 
600x200 pixels (widthxdepth), with a resolution 
of 72dpi. Maximise the screen and display the Rulers 
from the View menu. Then click the New Layer button 
at the bottom of the Layers palette. 


Double-click the layer that appears. Type in 
‘Bridge’ as its name and check the Share Across 
Frames box. Next, you need to paste the selection 
onto the canvas and type in ‘0’ for both the X and Y 
co-ordinates in the Info palette. 


( » ~ Welcome to 


Ss Ironbridge 
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Using the Text tool, click in the document and 


CG. Drag down a guide to sit on the baseline of the 
type in ‘Welcome to lronbridge’ in the dialog box. fi 


irst line of text. Select the text box, go to the 
Insert menu and click Symbol. Then drag the symbol 
off to the right until the text is off the screen, before 
finally copying it. 


i ~ Welcome to. 
Ss Ironbridge 
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Paste to create an ‘Instance’ and position the 
baseline on the Guide with a small gap between it 
and the picture. Select the Symbol, hold down the Shift 
key and select the Instance. Go to the Insert menu and 
choose Tween Instances. 


Co. Type in ten frames, check the ‘Distribute to 
Fr: 


you now have 12 frames. Click the Play button 


(bottom-right of the screen) and the text should now 
fly in from the right. 


>, Welcome to 


In the Frames palette, click on Frame 12 and 
choose Duplicate Frame from the pop-out menu 
on the right. Create ten duplicate frames. Remain on 
Frame 12 and create a new layer called ‘Industrial 
text’. Now create the text ‘Where the industrial 
revolution started’. 


‘ames’ box and click OK. In the Frames palette 
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Stage one: Continued... 


Ironbridge 


{yihere the industrial revolution started 


Make the text 2ipt italics and stretch the box 


so the text fits in one line. Go to the Insert menu, 


click Symbol and then copy the symbol. Create a new 
layer called ‘Industrial text2’ and paste the instance 
onto that layer. 


&. Go to the File menu and choose Export. 
Maximise the dialog box that appears and choose 


Animated GIF from the settings. Under the Palette 
menu, choose Web 216 and uncheck the Dither box. 
Check the size of the file at the top of the screen. 


(i> Welcome to 
S<!e0 Ironbridge 


@. Hide ‘industrial text2’ layer, select the symbol 
and reduce the opacity to 1 in the Object palette 
(it should disappear). Show the Industrial text2 layer 
and select both the Symbol and the Instance (drag a 
marquee around both to select them). 


Click the Animation tab and select all the 
frames. Click on Frame 1 at the top of the list, 
hold down the Shift key and click on Frame 22. Next, 


adjust the ‘Frame Delay’ from 20/100ths to 10/100ths 
of a second. 


Stage two: Creating rollover buttons 


@. Go to the Insert menu and select Tween 
instances. Choose nine frames and check the 
Distribute to Frames box. Click Play to see the effect. 
Save the file as a PNG file (which will leave all the 
objects intact to be edited later). 


Click Next at the bottom, choose the folder 
where you want to save your file and call it 
welcome.gif. You then need to generate an HTML file 


at the same time by choosing the style of HTML you 
want to create. Click Save. 


If you roll your mouse over a button and text pops up, you've found a rollover button — we’re going to put some in our site 


Co. Open the Modern file from the CD. Create a 
circular selection with a diameter of 180 pixels 
using the Elliptical Marquee, then go to the Edit menu 
and select Feather. Give it a Feather of 10 pixels, click 
OK. Copy that section of the image and start a new file. 


30 | computer arts | web design special 


Make the file dimensions 380x220 pixels 
(widthxdepth). Then paste the section you've just 
copied into the file and move it to the left-hand side. 


Create a new layer called Text, and also duplicate 
Frame 1 to create Frame 2. 


With Frame 2 selected, you need to create 
some text to appear on the right-hand side. It 
should say: ‘The River Severn meanders through 
lronbridge. This is the thoroughly modern bridge that 
spans the river further downstream.’ 


Stage two: Continued... 
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oC. Highlight the text and make it 17pt Century 
Schoolbook italic with 140 per cent line spacing. 


Stretch the box as necessary to make it fit. Then select 
the Slice tool and drag over the right half of the picture 


to enclose the text in a rectangle. 


With the hot-spot selected, go to the 
Behaviours palette and select Swap Image from 
the menu under the Plus sign. Make sure the ‘text’ 
slice is highlighted and that the source of the swap 
is Frame 2 before you click OK. 


| [eee oe ; 


&. By viewing the HTML, you can see instructions 
for copying the JavaScript and table sections, and 
pasting them into another file. Highlight and copy the 
section that says ‘begin copying JavaScript here’. 
Next, open the file welcome.htm that you created 

in the previous section. 


Co. In the Object menu, select Gif WebSnap 128 
under Export Defaults, and change the name of 
the slice to ‘text’ (de-check the Auto-name box). Then 
select the Ellipse tool (not the Marquee tool), and draw 


a circle, making sure you hold down the Shift key. 


Save the file as a PNG in case you want to 


edit it later and then go to Export. Choose JPEG 


as the export setting and adjust the amount of 
compression until you have the best quality with 
the smallest possible file. 


@. View the HTML of the welcome.htm file and 
click in the <head> section after the meta-tags. 
Paste in the JavaScript and return to the button.htm 
file. Then you need to highlight and copy the table 
section that contains the images. 
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The circle needs to fit over the picture of the 
bridge. Switch to the Transform tool and drag the 
handles until it fits exactly. Then select Hot-spot from 
the Image menu and as if by magic, a polygon hot-spot 
is created from the circle. Good, eh? 


Co. Click Next at the bottom of the palette and 
choose the HTML style you want. Choose Slice 
Objects (under Slicing), type in ‘button’ as the name of 
your file and Save into the same folder as the previous 
files. Launch your HTML Editor and open the HTML file 
that you’ve generated. 


~ Welcome to 
F ai Ironbridge 


+] 


Where the industrial revolution started 


@. Finally, add a couple of <br> tags after the 
animation image map, and then paste in the table 
section from button.htm into welcome.htm and Save 
the file. Preview it in the Browser and you should find 
the animation and button are combined in one file. EIS 


web design special | computer arts | 31 


< web pera compression techniques > 


= Rt paket chad ie ome 


aa FAS «) Gua) 


ye 


[TECHNIQUE] 


32 | computer arts | web design special 


) = &) 


eocce oonee ee 


SaRGus, JESSEESUEL Gseseeueu. JeeeeeGnaL 


Navigation 


NAVIGATION AND THE OVERALL STRUCTURE OF YOUR SITE GO HAND IN HAND. 
THEY’RE THE FIRST THING YOU SHOULD THINK ABOUT BEFORE YOU EVEN START... 


avigation is both the most 
neglected and most 
important part of Web 
design. Just like other areas 
of graphic and multimedia design it’s 
all too easy to allow yourself to be 
dragged along by purely aesthetic 
concerns, leaving navigation until last 
or assuming that a standard 
navigation bar will do. There are some 
emerging techniques that you will see 


f 


employed in sites again and again — 
though equally you'll see mistakes 
being made repeatedly, even in 
commercial sites. 

The challenge is to sort out which 
techniques are losers and which are 
good for users. To achieve this, the 
first thing you should think about is 
not how the content of a site will be 
displayed but how it will be accessed. 
Web designers need to be as 


accomplished at interface design as 
they are at graphic design. 


Breaking it down 


The philosophy behind many of the 
popular site building tools such as 
FrontPage and NetObjects Fusion is 
that if you carefully structure your site 
into discreet sections then navigation 
will take care of itself. In fact 
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Navigation devices that work 


These tried-and-tested methods can be relied on to get the job done... 


1.‘Sidebar’ navigation works because it allows you to build a consistent 
navigation model and page layout throughout the site. Navigation 
options are always visible and you still have plenty of room for content. 
2. You can augment sidebars with JavaScript or Java to create fold out 
directory structures in more complex sites. See the Website of our sister 


magazine, PC Plus, for a good example. 


3.‘Topbar’ navigation works well in situations where there are fewer 
sections of a site to choose from. A second navigation bar below the 
first that changes depending on which section of a site being viewed 
enables users to access content in more complex sites. 

4. Using a simple two-frame layout makes for fast loading pages 


with consistent navigation. 


5.A text-only alternative to a graphic navigation bar is a must. 


Graphics don’t always download reliably. 


navigation really does take care of 
itself in these type of authoring 
application; the links you dictate 
simply appear automatically following 
a template. 

The problem with this is two-fold. 
To begin with Websites would be truly 
boring if they all followed the default 
navigation structures of commercial 
site building tools. Perhaps more 
pressingly, there comes a point where 
it simply takes up too much space to 
include every link on every page — or 
even links to every section of a site. 

So, while a thoughtfully 
implemented structure divided into 
sections is important — it’s just as 
important to look at navigation from | 
the level of each individual page inthat | 
structure. On any given page on a site 
a user needs to know several things; 
where they are in the site, what else 
there is on the site and, if it seems | 


Navigation bar 


Using a Java-powered tree metaphor to present a 


large archive of content, the PC Plus site does the 


job admirably. It’s at w www.pcplus.co.uk 


The classic hierarchical navigational 
structure at Yahoo lets you know where 
you are in relation to the top page 
throughout the site using a directory 
metaphor. Go to w www.yahoo.co.uk 
and just try to get yourself lost... 


interesting, how to get to it. To make 
this work the system employed has to 
be consistent across the entire site. It 
sounds simple in theory but there are 
many different ways to implement a 
practical solution. 


Different strokes 


To make a very broad generalisation, 
there are three types of Website, and, 
in no particular order... 

The first is static. These have a 
fixed structure and fixed — or 
infrequently updated — content. It’s 
with these that you have the greatest 
freedom in creating a navigation 
system — this is a case scenario when 
you can indeed bolt navigation on as 
an after thought and make it as 
spectacular (or not) as you like. 

The second type is made up of 
a body of fixed content and fixed 
categories, which are updated 
frequently. Yahoo is a prime example 
of such a site — and you'll often find 
that sites like Yahoo have similar, 
hierarchical navigation systems, like 
the filing system on your computer. 

The final category is sites whose 


You can easily tell the your audience where they are using the navigation bar... 


PR Untitled-1 @ 100 


bar.gif (newphobia/bar htm") - Dreamweaver 


When building your pages place the navigation 


For each individual button, create a ‘greyed 
out’ variation. This can literally be a monochrome 
version of a colour button, or a muted version. 


bar in the same place on each page with the 
‘greyed out’ button variation corresponding to the 
section you’re on. This is a simple method of 
graphically showing where the user currently is and 
what other options are available. 


o. Build your navigation bar using individual 
buttons. You can still get an ‘image map’ effect 
by creating the bar as a single image in a drawing 
package, then slicing it into pieces to be reconstructed Alternatively, if the rest of the buttons are ‘raised’, 


in your Web authoring program. a version without 3D effects. 
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Navigation Bar 

Graphic representation of site 
wide navigation. Despite the 
name it doesn’t necessarily have 
to be rectangular. 


Sidebar navigation 

Vertical strip rendered in frames 
or tables down the right hand side 
of a Web page used for navigation. 


Frames 
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Navigation devices that don’t work 


Sometimes it pays to learn from other people’s mistakes... 


1.‘Floating’ navigation panels that launch in a separate 
window may look clever on paper, but they're lousy in 
practice. It’s too easy to lose them behind multiple 
browser windows. 

2. Provide alternatives to Java or JavaScript powered 
navigation aids — some browsers may choke on them. 
3. Avoid using tools to build buttons that require 
obscure plug-ins. If you're going to build buttons out 
of anything but graphics, HTML and JavaScript, use 
Flash. Even then, give the user an alternative method 
of finding their way around. 

4. Don't include links to non-existent pages. In fact — 
don’t even bother uploading a site until it’s complete. 
5. Try to avoid redundant links — you don’t need a link 
back to the page the user is currently on. 


404 Not Found 


The requested URL /new/nothing html was not found on this server. 


Usually we'd recommend w www.worstoftheweb.com for examples 
of how not to build Websites, but the team were recently a little lax 
themselves. Last time we looked the site was half way through an 
overhaul and we got the dreaded ‘404 Not Found’ error. 


Frames are sometimes frowned upon, but they can help provide consistent navigation in a site... 


Co. Decide whether you are going to use ‘sidebar’ 
or ‘topbar’ navigation. Use a sidebar when you 
need to expand information or there are a lot of 
available links. The ‘topbar’ method works best when 
there are only a few sections. 
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Make sure all the links in your ‘navigation 
frame’ are targeted at the ‘content frame’. 
External links to other Web sites should ALWAYS open 
in either a new window or the current window (using 
‘target=_blank’ or ‘target=_top’ in the HTML), not the 

current frame. 


Co. Divide your htm! document into two frames, 
one for navigation and one for content. When you 
start using more than two frames on screen you begin 
to eat in to the space you have available to display 
content and the results on different users screens 
become less predictable. 


content changes frequently, usually 
within fixed categories. The BBC’s 
news site is a good example, featuring 
a navigation system that mimics 
‘magazine navigation’ — divided into 
regular sections which are accessed 
through an index. 


Opening shots 


While there are different ways of 
representing navigation — the general 
principles are basic. What they all 
share in common is that they generally 
‘open’ with a front page where the 
entire site is mapped for the user, 
section by section. 

Some sites may forgo this by 
providing a separate link to a complete 
page index with rudimentary section 
links in the body of the opening page. 
Whichever approach is used — 


providing some kind of site map is an 
integral part of a successful navigation 
system. It’s something reliable that the 
user knows is there from the beginning 
and that they can return to if they get 
lost later. 


From the top down... 


One problem that’s beginning to 
emerge for some sites is that as 
their archives grow they are having 
to cope with more and more content 
to navigate. Many sites that began 
as Web magazines have found 
themselves unwittingly becoming 
data archives over time and have had, 
or are undergoing massive redesigns 
to accommodate. 

A commonly-made error has been 
to lay out different site sections in very 
different ways — a fundamental 


mistake that only serves to slow down 
the site, confuse navigation and, 
eventually, alienate users. While most 
end up implementing some kind of 
hierarchical structure with a consistent 
navigation method, some solutions are 
more radical. The team responsible for 
the redesign of a site belonging to a 
British newspaper chose to deal with 
the problems caused by navigating 

its backlog of material by axing the 
archive completely. 

We can learn an important lesson 
from this — the site building tools have 
got at least one thing right. Site 
navigation begins from the top down. 
The opening page, in common with 
printed magazines, is the place where 
it all begins. 

But it’s important to remember 
that while they do share some common 
purposes, Websites aren’t magazines 
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Heavily criticised for its slow-loading 
Website a couple of years back, 
Microsoft has now got its act together 
with a sleek opening page that combines 
simple ‘topbar’ navigation aids, a 
comprehensive front page index and 
keyword search tools. 


Tor 
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The Internet Music Machine is an impressive amateur effort that puts many 
professional sites to shame. It makes good use of the dreaded frames to set upa 
densely packed navigation sidebar, introduces sub-heading in the main area and a 
simple method of letting the user know where they are. It can be found at Ww 
www.cyberverse.com/~boris/IMM2/_frames/imm.htm 


Templates 
Build navigation systems into a template for the default layout of your site to speed up production 
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Plan the structure of your site on paper before 
beginning so that you know what the names of 
the main files will be before you build them. Construct 
the navigation bar so that individual buttons (or image 
map rollovers) point relatively to these files. 


Save the file as ‘template.html’ - then, as you 
build each page in your site open up this file to 
alter as appropriate. Make sure you change details 
between the HEAD tags or you'll end up with a lot of 
‘untitled’ documents. 


oe. Some authoring programs explicitly support 
templates, others don’t. You can use the method 
in fairly well any package by simply designing a layout 
containing your navigation system and a default 
layout, but no content. 


— it’s far more tiresome going back to 
the index every time you want to find 
a new section or a particular feature. 
Once the user moves to another 
section it’s like taking a step down in 
the hierarchy — a well thought out 


‘sidebar’ or ‘top bar’ navigation aids 
that enable you to go to a particular 
themed section within a site are 
essential. A structure like this is not | 
only simpler to construct navigation 
tools for — it’s easier to expand. 


redundant. Still, that doesn’t mean you 
should rule out allowing your audience 
to move backwards and forwards 
through your site, like flicking pages in 
| abook. This can work very well within 
smaller sites or particular sections 


navigation structure means they | | 


shouldn't have to move from there. 

At this point they need to know where 
they are and have a device that enables 
them to move to other sections, 
including going back to the top level 

if necessary. To this end additional 


...Or side to side 


There are ‘backwards’ and ‘forwards’ 
buttons on the user’s browser, so 
building a navigation aid that lets you 
move to the previous page is effectively 


containing page after page of similar 
or sequential content. The method can 
be quite comfortably implemented 
alongside a hierarchical navigation bar 
of some kind — rather than conflicting 
with each other, the techniques 
complement one another. EEE 
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BMW 3 Series infomercial — www.bmw.co.uk/new3series AKQA reveals its Secrets... 
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Power. 
Strength. 
Agility. 


Intelligence. 


The DHTML sliding navigation 
serves a number of purposes: the 
user is instantly shown that there is 
navigation available which can be viewed 


The infomercial begins with an So. On completion of the introduction, or hidden, then they’re shown where it When continuing on through the 
introduction created in Flash. This the user automatically enters the goes and how it can be retrieved. By site, the same process is employed: 
sets the tone of the site and introduces home page. At first the ‘ANALYSIS’ hiding the navigation, a greater amount of on entry to the page the navigation is 
the user to the central idea using DNA. navigation bar (which uses DHTML) is space is made available to populate with shown and then automatically hidden. 
This idea is carried through the whole viewable, and then it slides off to the information and/or images. The extra area As the navigation has been cached, the 
BMW 3 Series campaign. screen left. is also used effectively as ‘white space’. graphic is not loaded twice. 


Websites for Cable and 
Wireless, the MGF and 
Rover are amongst the 
AKQA portfolio - made 

with a software cocktail 

that includes Fireworks, 

Flash, DeBabelizer, 
After Effects Poser , 

and Photoshop. Cor Pp 4 3 re - 
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KQA was launched in October 1994 to work with major 
global brands to develop the best strategic and 
creative work for digital media. “While the company 
has changed and grown, our values of innovation, 
service, quality and thought have remained the same,” explains 
Hilton. AKQA is the UK's largest independent new media agency, 
has been profitable since day one and clients include BMW, 
Cable & Wireless, Carlsberg, Durex, Land Rover, MG, Mini, 


@ 


While this company has changed and Microsoft, Orange, Rover, Sainsbury's and Scottish Amicable. 
| AKQA has won many awards, including: Winner of Best Use 
77 
grown, “Our values of innovation, | of CD-ROM 1998; Best integrated campaign 1999 at Microsoft's 
se 2 z | Revolution Awards; Best Use of Digital Advertising Campaign 
rvice, quality and thought have | 1998 at the New Media Age Awards for BMW; and Grand Prix 
remained the same... ” says | Winner at the 1998 Marketing Magazine Design Awards for Durex. 
: “We create the best services, content and applications to 
Creative Director James Hilton maximise our client’s return,” continues Hilton. AKQA’s expertise 


extends beyond the Web into on-line ads, e-mail campaign, 
response management, kiosks and WebTV/Digital TV. 

And while AKQA is a Microsoft Certified Solution Provider and 
thus no slouch technically, The Creative Department also delivers 
award-winning ideas and creative solutions. Indeed, AKQA’s 
creativity is so far-reaching, that many clients refer to its work as a 
benchmark for brand integration and innovation when introducing 
their brands. Now that’s satisfaction for you. HEE 


For more information, t 0171 494 9200, or visit W www.akqa.com 

And then check out these AKQA-powered sites: W www.bmw.co.uk 

W www.cwcom.co.uk/orpmarkets/W www.durex.com W www.rover75.com/ 
W www.landrover.co.uk/W www.mgcars.co.uk/mgfcup/ 
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Greater strength all round 


5 new lightweight body, which is 
0% more rigid than the previous 

|, the new 3 Series Saloon gives 
en better driving dynamics, with 


pind . bs When hidden, the user can DHTML is also used in the display 
The user accesses various strands access the ANALYSIS navigation bar of text. So the maximum amount of 
within the DNA which relate to Co. When a section is selected it is by clicking on the ANALYSIS tab. There’s relevant info is available without an 
features on the car. This idea works well highlighted on the navigation bar. also a supporting icon to show ‘this can unsightly scrolling window being used, 


on-line, as it successfully integrates the This helps the user maintain a perception expand’. When the navigation is viewable, AKQA created a DHTML scrolling window, 
campaign and is highly relevant to the of where they are within the site and this icon changes direction showing that which scrolls on mouse rollover and also 
interactive medium. greatly cuts down on lost users. ‘this can be put away’. integrates into the style of the site. 
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MACROMEDIA'S POWERFUL ANIMATION TOOL HAS TAKEN WEB DESIGN 
BY STORM. FIRE UP THE DEMO AND TURBO-CHARGE YOUR SITE... 


odestly pitched as a vector animation tool, 
Flash is as close to being a fully fledged 
multimedia authoring package as the Web is 
likely to get. There's little Flash can’t handle. 
From banner ads to interfaces, splash pages to 
buttons, Flash can do it all — and all with a learning 
curve that'll forgive even the most technophobic. 
Deceptively complex pages and animations can 
be compressed into file sizes that rival ordinary HTML 
for speed, but pack the aesthetic punch of a truly 
dynamic standard. The secret is in choosing a vector 
format. Bitmaps can carry photographic information, 
but in order to do so the file format has to define the 


exact position and colour of every pixel that appears 
on-screen. Vector formats define shapes and lines 
rather then individual pixels, containing far less 
complex co-ordinate information than their bitmapped 
cousins. Naturally, vector format file sizes are far 
smaller than bitmaps — and as a bonus, they can be 
scaled to any size without losing data. 

There’s a 30-day full version of Flash 3 on the 
CD for you to try - and these tutorials are designed 
to take you through the basics and beyond... 


—_—_————— 


Flash 3 costs £304 (upgrade £92), and is available from Computers 
Unlimited on t 0181 358 5857 or W www.macromedia.com 


Stage 1: Basic animation and tools 


To start off on our Flash journey, we'll take a look at these basic functions... 
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@. Open up Flash 3 for the first time and you'll 
find an interface that combines several familiar 
elements. The right-hand toolbar contains icons for 
drawing shapes and lines, colouring them with solid 
or gradient fills and resizing or rotating them. 


omputer 


arts 


Britain’s biggest-selling creative magazine » Mac & PC 


CG. Our example begins with a vector image of the 
Computer Arts logo. To start animating, the entire 
logo is selected and is used to create a symbol (go to 
the Insert menu and choose Create Symbol). Although 
you can animate with simple shapes directly, working 
with symbols makes it easier to re-use elements. 


oC. In our example, we’re going to slide the 
Computer Arts logo onto the screen. Selecting 


frame 1 in the Timeline, move the logo symbol until it 
disappears off the edge of the stage, using the cursor 
keys to nudge it the last few pixels. 


oO. The Timeline below the main menu bar is where 
much of the action takes place while you're 
creating animations. You'll also notice that Flash can 
divide your animation (or ‘scene’) into a series of 
layers. These are used to separate and control multiple 
animated elements in a scene. 


The easiest method of creating animation with 
Flash is to tween between keyframes - make 
amendments to the final frame then instruct Flash to 
calculate the transitions in between. Flash is able to 
tween animation using motion, resizing, rotation, colour 
changes and shape transformations (morphing). 


Frame Properties 
Label | Sound| Actions Tweening | Template | 


Tweening: | IRR 


¥ Tween scaling 


Rotate: [Automatic | ia tines 


T Orient to path direction 
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CG. With the first frame still selected, choose 
Modify>Frame, and select the Tweening tab. 
From the Tweening pop-up, then select Motion. Next, 
move the Easing slider towards ‘Out’ - this slows the 
animation as it comes to a close. 
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oC. You can also import images prepared in other 
packages into Flash to incorporate into your 
animations - even bitmaps. If you want to actually 
animate a bitmap image, though, you'll have to convert 
it into a vector graphic first. Select the element in 
Flash and choose Trace Bitmap from the Modify menu. 


CG. By default, there’s already a keyframe in 
frame 1 of the Timeline. To define the end 
position of the animation, select a second frame at 
frame 10. Go to Insert>Insert Keyframe. The image 
that’s placed at frame 1 now appears in frame 10, in 
the exact same position. 


Co. The same method is used to dynamically resize 
symbols. Simply rescale the final keyframe 


symbol appropriately and apply tweening in the same 
way. To rotate objects, choose an option from the 
Rotation menu in the Tweening dialog. 
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stage 2: Making animated symbols 


Now you've got the basics down pat, it’s time to take the plunge into animation... 


Symbols 

can contain 
the same elements 
as Flash movies, 
including animation 
and multiple layers. 
You can place 
animated symbols 
into Flash scenes - 
they’ll animate in a 
loop independently 
of the scene, or, with 
a little scripting, be 
persuaded to wait 
for user input. 


Biplane Propeller 
BF Burst 
BS Chaser Light 
Chaser Light Off 


Fill the 
sphere using 


an appropriate 
colour, then draw 
a series of ‘rays’ 
radiating from it. To 
centre the symbol 
exactly, choose 
Select All, then go 
to Modify>Align. 
Click the vertical 
and horizontal 
centre alignment 
buttons, check the 
‘Align to Page’ box 
and click OK. 


Symbol Properties 


oC. Our example creates a simple animated ‘sun’ 
with only two stages - though an animated 
symbol can be as complex as any Flash movie. Choose 
File>New to start a new scene, then Insert>Create 
Symbol. Select the Movie Clip radio button, then give 
the symbol a name and click OK. 


For the 

second stage of 
the animation, insert 
anew keyframe at 
frame 2, then make 
alterations to the 
size of the ‘rays’ 
using the Scale 
option on the 
toolbar. Finally, 
reselect keyframe 1, 
and tween motion 
animation between 
the two frames. 


Stage 3: Making an animated button 


Animated buttons can add a great deal to your Website — here’s how to do them... 


o. Making an animated button is similar to making 
a standard animated symbol. Start by creating an 
empty symbol, this time making sure that the Button 
Radio box is checked. You can also begin with an 
existing element in your movie - though you'll have 

to select Edit to proceed. 
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When you edit buttons, the Timeline alters. 
You can only insert four frames and these are 
labelled ‘Up’, ‘Over’, ‘Down’ and ‘Hit’. The first three 
frames are animation stages, while the final frame 
enables you to define a hot-spot over the button. 


Flash switches into 

its Symbol Editing 
mode, which on the surface 
is identical to its Default 
view. Using the crosshairs 
that appear in the centre of 
the screen as a guide, draw 
a sphere by selecting the 
Ellipse drawing tool and 
holding Shift as you drag 
and draw. 


CG. Save the symbol as a standard Flash movie. 

To use it in other movies choose File>Open as 
Library, then drag the symbol into the scene you're 
working on. You can treat animated symbols the same 
as still symbols, and they can have interactivity, motion 
and colour transitions attached to them in movies. 


Flash 3 Uipinglogo Nha « Libtary) 
2} ‘Yew 


3 You can attach sound events to buttons (and 
indeed, other symbols or scenes) by including 
them in a layer of their own. Make a new layer and 
insert a keyframe at the point when you want your 
sound event to be triggered. Go to Libraries>Sound, 
and choose from the list. Then drag the sound you 
select onto the main stage. 
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@. Rollovers: In Web terms, a rollover is when 
you move your mouse over a part of the screen 
and something happens elsewhere. To create a 

simple rollover in Flash, select a graphic element and 
re-define it as a button - follow the steps outlined in 
‘Making an animated button’ to create a section of the 
image that responds to user input. 


Stage 4: Liven up your site 


Simple animations that loop infinitely are all very well, but Flash enables you to add interactivity... 


Detration| Color Effect Actions | Temgte | 
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Co. Actions: These enable you to add more 
complex interactivity to buttons. Select an 
instance (the first keyframe it appears in) of a button 
and choose Modify>Instance. Select actions and 
choose ‘On MouseEvent’ and check ‘Press’ - you can 
now choose to load an URL, load another movie, leap 
to another section of the current scene or calla 
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Frame Proper 
Label | Sound Actions | Tweening | Template | 
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Co. Embedded Actions: Actions can also be 
embedded into scenes. The most common use of 
this would be to stop the animation, or leap to a new 
scene at the end of the current one. To apply these, 
select the last frame of the current scene and choose 
Modify>Frame, then choose the Actions tab. Select 
Stop to end the scene there, ‘Go To’ to repeat the 
scene from a specified place (looping) or ‘Load Movie’ 


JavaScript at a click of a mouse. 


to open another Flash file. 


Stage 5: Preparing for the Web 


Flash generates small files — but every byte counts on the Web. Follow these tips to 


Co. Before creating symbols 
from complex images, check 
whether you can reduce the number 
of curves in the image first. Select 
the individual image you want to 
optimise, choose Modify>Curves 
and select ‘Optimise’ - you should 
experiment to get the best balance 
between file size and quality. 


CG. Get rid of any unused 
media before exporting to 
Shockwave - which may include 
multiple copies of the same 
symbol, bitmaps or sounds. Open 
up your movie's Library (in the 
Windows menu), and click on 
Select Unused Media in the pop- 
up. Delete all that’s highlighted. 


Co. You can test your movies to see how they'll 
perform before putting them on the Web. 
Select Control>Test Movie to see your movie as a 
Shockwave file. You can also select a simulated 
modem speed. Go to View>Bandwidth Profiler to 
get a frame-by-frame break down of performance. 


CG, Sometimes you can’t cut down the wait - but 
you can compensate for it. Add a fast loading, 
looping animation in your movie, perhaps containing an 
animated logo or credits. Include an ‘If Frame Is 
Loaded’ action in the loop that refers to the final frame 
of the entire scene, and set it so that the loop only 
ends when that frame is loaded. 


Scripting | Page Layout| Shockwave Alemate Image | Java | 


Flash supports a dazzling array of player formats - each 

requiring their own custom bit of HTML to play your movie on 
the Web. AfterShock, bundled with Flash 3, takes the pain out of 
scripting for multiple browsers and system set-ups. Use AfterShock 
to define a HTML template that will query the user’s browser invisibly 
and serve the appropriate version of your Flash file to it. The HTML 
delivers the right file, whether it’s a ShockWave document for 
browsers with the Flash plug-in, a standalone Java applet or the 
ActiveX version for Windows-based Internet Explorer users. 
AfterShock also generates the files you need to transfer to the Web. 


Movie 
A Flash animation. 


Scene 

A Flash animation that takes place 
against the same background. 
Movies can be made of multiple or 
single scenes. 


Symbol 
Areusable graphic or media element. 


Stage 
The main editing screen in Flash. 


Instance 

The appearance of a symbol or 
other element in a single frame on 
the Timeline. Multiple actions may 
be applied to different ‘instances’ 
of the same element across the 
Timeline. EE 
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SUPPORT FOR MP3 AUDIO, FORMS FOR TEXT ENTRY AND TOOLS 
FOR INTERFACE DESIGN? GET ACQUAINTED WITH FLASH 4... 


v acromedia has boosted MP3, 
the increasingly popular audio 
compression format, by 
is supporting it in Flash 4-the 
new version of its Web animation tool. 
The ability to add MP3 audio to an 
animation is just one of many new features 
( in Flash, which is largely responsible for 
turning the Web from a series of static 
pages into a multimedia 
feast. Support for 
MP3, which is now 
a popular means 
of distributing 
music on the 
Web, is certain 
to encourage 
designers to add 
audio to their Flash 
animations. MP3 
compression keeps the 
overall size of streamed 
files small, so that 
a voiceover or 
background 
soundtrack can 
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play alongside the graphics with ease. 

Other additions to Flash enable 
designers to do much more than create 
animated Web graphics. With the new set 
of actions, you can build in a variety of 
interfaces directly into Flash movies 
without the need for programming. Plus, 
interfaces can now include buttons that 
retain the same state —- even when a user 
leaves a Website to return later — and 
hierarchical menus. 

Even more significant, given the large 
number of new retail outlets opening up 
on-line every week, is Flash 4's ability to 
integrate text entry forms into movies. 
Web designers who tested early versions 
of the software say they’ve produce an 
on-line store that enables users to drag 
products off a virtual shelf and drop them 
into a shopping basket. 

While such features are sure to lead 


General Functions 


Evaluate variable by name 


Flash 4’s new actions enable you to add whizzy buttons and menus to your Website without 
having to program lines of code. Now that’s just what you want to hear, isn’t it? 


to more user-friendly Websites, Flash 4 is 
itself easier to master than its before. It 
includes a range of new dialog boxes that 
display the properties of symbols, artwork 
and scenes, plus tools for drawing hand, 
circle and rectangle shapes. In addition, 
improvements to the library enable you to 
store media such as graphics, movies and 
sounds in different folders. 


Place in the suite 


Where Website design is concerned, 
Flash 4 takes its place alongside 
Macromedia's other professional Web 
design tools, Fireworks and Dreamweaver. 
Flash enables you to create streaming 


vector graphics that play as they're 
downloading, while Fireworks handles 
bitmap graphics, and Dreamweaver the 
layout and editing of HTML pages. 
Macromedia’s Generator software for 
servers won't support the new version 
of Flash until late summer 1999. 
Ubiquity is a significant factor in the 
success of Flash. Websites incorporating 
Flash content can be viewed on Windows, 
Macintosh, Linux and several other 
platforms besides. What’s more, many 
people are able to view Flash animations 
without having to download additional 
software. A study in February 1999 by 
researchers at King, Brown & Partners 
found that 76.8 per cent of people using 


“Flash 4 includes new dialog boxes that display 
properties of symbols, artwork and scenes, plus 
tools for hand, circle and rectangle shapes...” 
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One of version 4’s best new features is its 
ability to include text entry fields. Dynamic 
on-line shopping trolleys anyone? 


The improved library makes it easier to find 
different kinds of media by storing them in 
separate folders. 


< flash 4 os , ecient > 


New features 

s = = 

in Flash 4 

At the heart of Flash is a timeline 
interface displaying the elements that 
make up the animation. In Flash 4, the 
timeline has been tweaked to make it 
easier to use. For example, an outline 
colours mode makes it simpler to see 
the different layered objects on the 
screen, while smart guide layers ensure 
that motion-tweened objects 
automatically snap to a drawn path. 

The enhanced library likewise 
speeds up the design process by 
grouping various types of media in 
different folders. You can then search for 
a particular file by name, the date it was 
created, type of media, or the number of 
times it’s been used in the Flash movie. 

If you're an old hand at Flash, you'll 
appreciate the improvements; and if 
you're new to it, there’s a whole series of 
step-by-step tutorials on offer. These go 
beyond help files to provide lessons on 
basic tasks such as using drawing tools, 
managing layers, creating buttons and 
synchronising sound. 

Flash 4 also solves two problems 
commonly experienced by Website 
designers. To ensure colours are 
consistent across a site, a Web-safe 
palette of just 216 colours is almost 
essential. Flash 4 supports the 216- 
colour palette, but also enables you 
to import other colour-sets, while 
guaranteeing consistency. 

Finally, a new Publish command 
enables designers to export the files 
necessary for Websites, broadcast and 
CD-ROM media in one fell swoop. 


the Web could already view Flash content 

with their browser. This is even higher than 

Java-based Websites, which only 61.9 per 

cent of users could experience. 
Professional designers have the 

added advantage that the Flash format 

is also supported by FreeHand. You can 

convert FreeHana’s layers and pages 

into frame-by-frame animations for use 

in Flash, and even use it for printing 

storyboards of Flash Websites. 


Flash 4 is set to cost £234, upgrades £93. Computers 
Unlimited € 0181 358 5857 W www.macromedia.com 
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laris Home Page may not win the awards 
for being the flashiest, most powerful 
WYSIWYG HTML editor in the world. But 
what it has on its side is a rock bottom 
price tag, plus an ease of use which can puts the 
heavyweight likes of Dreamweaver to shame. What’s 
more, it’s an excellent introduction to the world of 
Website creation. 

For FileMaker Pro users, Home Page has a 
number of advantages over the competition. You can 
use the FileMaker Connection Assistant to guide you 
through the process of creating pages connected to a 
FileMaker Pro database, and also use the Reference 


G 
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me Page 


WANT TO KNOW HOW TO GET RESULTS WITH THIS ACCESSIBLE DRAG- 
AND-DROP PAGE DESIGN TOOL? LUCKY YOU’RE READING THIS THEN... 


libraries to edit pages created by FileMaker Pro. 

Home Page has features that all Web developers 
will find useful — including library creation for images 
and text snippets, plus the ability to colour HTML text 
to differentiate tags, scripts and values. 

Here, we’re going to create a mini-site and use 
Home Page's built-in features to create an image map 
and form for the user to fill in. All the files are on the 
CD in the Tutorials folder. Time to get to work... 


More info on FileMaker Home Page from W www.filemaker.co.uk 
Version 3.0 costs £82 and is available from Computers Unlimited, 
t 0181 358 5857. Expertise supplied by Craig Williams. You can 
contact him on @ info@craigwilliams.co.uk 


Stage one: Creating a navigation page 


Using an image to provide navigation links for a Website is easy in Home Page. The complete page is on the CD —nav.htm 


File Edit Insert format Style Window 


Use thin view to et parameters for 9 plected object 


The simplest way to ensure consistent page 
layout without resorting to DHTML is through 
tables. Here, we’re going to place all the elements 
within a single table. The first step is to start with a 
new document and insert a table (you can do this 
from the Insert menu). 
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HTML pages can have a number of attributes - 
title, base URL and so on. You should set these 
before saving the file. As this page operates from a 
frame, the title won’t be displayed, but it’s useful to 
get into the habit. Use the Document Options windows 
(Control/Command+4J) to enter values. 
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Extra HTML Attributes: 
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oe. Using the Object Editor window (Control / 
Command+E toggles the window), you can then 
set the attributes of the table as shown. When defining 
the width, the Pixels Selector needn't be set, as all 
numeric entries here are assumed to refer to pixels. 
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Co. Clicking in the first cell, press Control/ 
Command+Shift+l to insert the image logo.gif. 
Insert image navbar.gif (from the CD) in the middle cell 
and email.gif in the bottom cell. As the e-mail graphic 
isn’t the full width of the cell, we’ll need to align it right 
(Control/Command+]). 
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We're going to use the middle graphic as a 
menu for the pages of the site. To do this, we 
need to turn it into an image map, which is something 
Home Page makes very simple. Select the image, and 
then select the Behaviour tab, Image Map and Edit 
from the Object Editor window. 
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od. Use the Rectangle tool to define the four other 
links. Always set the Target Frame as ‘content’, 
and give the links meaningful names. Remember to 
name each of the links with the .htm extension, as they 
refer to actual HTML pages. 


Tie tail Invert Format style Window 
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Display 18 the exter nest frame. 


CG. Any image used as a link has a border placed 
around it automatically by browser software. 
To make sure this doesn’t happen, you need to close 
the window where you defined the image map, and 
then enter a nought in the border attribute of the 
Object Editor window. 
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CG. To define the first link, use the Rectangle tool 
(from the Image menu), and drag out an area over 
the Cookshop part of the graphic. Use the Link Editor 
window (Control/Command+L) to enter the values as 
shown above. 
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Co. For the e-mail graphic we need to create a 
special e-mail link using the Link Editor window 
(Control/Command:+L). Select the graphic and follow 
the examples given by Home Page to enter an e-mail 
address. Again, set its border to zero (as before). 
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Stage two: Creating a content page 


For pages with a lot of content, you can use anchors to enable viewers to move around the page with ease. See cook.htm 
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eo. Starting with a new document, insert the 6. Clicking in each of the cells, enter the same 
cookshop.gif image at the top of the page. Place t 


ext as shown. These provide links to information 
a couple of forced returns (Shift+Return) to create placed further down the page. To set the links, select 
some space before inserting a new table. Use the the words in turn and use the Link Editor (Control/ 
Object Editor (Control/Command-+E) to set the table Command:+L) to enter meaningful values. Note the # 
up as shown. 


You will notice that all the links turn blue. This 
is the default colour for text links and may not 
suit your colour scheme. Use the Document Options 
window (Control/Command+J) to change the values 
for this page. 
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Oo. For our product information, you need to insert 

a table using the same attributes as for step one, CG. Having set a link earlier, we now need to set a CG. If your viewers travel down a long page, its 
above. This time, specify three columns and six rows. destination point. Clicking to the left of the first useful to provide a link back to the top. Use the 
Select the first cell and use the Cell tab of the Object cell, insert an Anchor (Control/Command+Shift+A), Link Editor to set a link on the ‘Back To Top Text’. Then 
Editor to specify a width of 40 per cent. Enter the and enter the name you specified in step two, above. insert an anchor at the very top of the document to 
information as shown above. 


Do not enter the # character. provide the destination for that link. Save this file. 


Stage three: Creating a frames layout 


Now you've got two pages, you can use Home Page to create a page to define your frames. See file Index.htm on the CD... 


‘tuston in the new Frame Document: 


@ Herd disk:desktop Folder:ntmi:nav.ntm 
{| | GLHerd disk:Desktop Folder:htmi:cook.ntm 


Document Orientation: | 


Once the pages have loaded, select the left- 
hand frame (containing the navigation page) and Finally, select the right-hand frame and set 
use the Object Editor window to set its width to slightly its frame name to ‘Content’. This provides the 
Frame Page from the Create New... option. Then use wider than the menu graphic (here we’ve used 115). destination frame for the links created with the Image 
the Add button to select the two files we’ve created Fixing the size ensures that the frame displays at the Map of the navigation page. Save this as index. htm, 
in the previous steps and select vertical orientation. correct size. 


the name typically given to the first file of a site. 


To create a frames page, select a Custom New 
Document (Control/Command+Shift+N), then 
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Stage four: Creating an order page using forms 


< home page tutorial S web special > 


Forms are a complex part of HTML, but are handled quickly using Home Page. The final file is on the CD, called order.htm 


Tile Edit insert format style Window 
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oe. Starting with a new document, insert the 
order.gif image (from the CD) at the top of the 
page. Place a couple of forced returns (Shift+Return) 
to create some space, and then insert a frame area 
(from the Insert menu). 
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We need some fields for the user to fill out 
to send us a message. First, though, we need a 
hidden field to designate the recipient of this message. 
To do this, use the Insert menu to place a hidden form 
in the form area, and enter a relevant e-mail address. 


oO. Do the same for an e-mail Text field and then 
insert a pop-up menu field. This menu contains a 
number of options, only one of which the user can 
select. Click the Edit Items button to add the entries 
to this field. 
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Co. Any form requires a Submit and Reset button. 
Place these using the Insert menu and click in 
them to give a name that’s more relevant to your page. 
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Similarly, we need a text area for the address. 
This needs to be larger, so insert a text area 
and specify its size to match those of the text fields 
created earlier. At this point, you need to make sure 
there are enough rows for a full address. 
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Co. In order to make this form work, we need to 
specify the action when the Submit button is 
clicked. Forms need to be processed by a CGI script on 
the server, so you'll need to know the location of your 
mail processing script. You can get this information 
from your ISP. 


Type in a name for the first user field, then use 
the Insert menu to place a Text field after the 
field name. Enter values for the size and maximum 
characters it can take. Then give the field a meaningful 
name you can interpret from the resultant e-mail. 
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oC. Finally, we're going to use a checkbox to 
el 


nable the user to specify whether they want to 


be on a mailing list. Again, use the Insert menu and set 
the initial state of the checkbox. 


aces swe test oo Fro or win mt 
‘be eioplayed. Sere specie veluea can be ured: 


Co. Now, save this file out using the name defined 
i 


in the navigation links created earlier and upload. 


Now you have all the elements to make the household 
Website of your dreams. EI) 
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The definitive guide to Web design » Mac & PC 


en 
# Plug-ins Bt 
o Create this cover image 


Computer Arts Photoshop Special — 

100 pages dedicated to Photoshop. Includes 125 tips - 
for any Photoshop user, plus 16 complete tutorials in: 
Menus & Palettes, Selecting, Rubber Stamp Tool, Re- 
sizing, Blurring, Colouring B+W images, Colour- 
correction, Adjustment layers, Edges, Photo- 
manipulation, Drop-shadows, 3D techniques, Texture- 
mapping and Metal Effects. 

CD - Mac-and-PC demo of Photoshop 5, demos of the 


each of the tutorial articles. 
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arts = i 


© 200 essential tips for 
EVERY 3D designer 
#10 complete tutor; 

© The best resources, 
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5 The definitive guide to mastering 3D 


Build 
Old Trafford in 
formeZ! _ 


Computer Arts 3D Special — 

The definitive guide to mastering 3D includes 200 essential 
tips for every 3D designer, plus 10 complete walkthroughs 
that can be tackled in many applications on any platform. 
There's also a comprehensive 3D software Buyer’s Guide, 
plus book reviews, online resources and more. 

CD — FREE fully-working software: Strata Vision3D 4 
(Mac), trueSpace 2 (PC) PLUS: Cinema 4D GO! (fully- 
working for 90 days), Amapi 4 (fully-working for 60 
days), loads of software demos... AND £2420’s-worth 
of Viewpoint wireframe models absolutely FREE! 


10 best Photoshop plug-ins, plus support files for 


| me 


Call the hotline on 


Or via e-mail 


Please quote code: COSO3 


How to order 
back issues: 


+44 (0)1458 271 108 


subs @futurenet.co.uk 


NOTE: Regular Computer Arts back issues cost £5, 
while Computer Arts Specials back issues cost £6 

* Postage free in UK only. Add £1 per issue for European 
orders. Add £3 per issue for the rest of the world. 


Sore Arts: e : 


Make this fantastic imageiin 


Issue 30 — 
Photoshop & Video on the Web 
tutorials, - Maya NT 1 reviewed 
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CD Photoshop 5, formeZ 3 demos. 


compute 
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Issue 24 — 
Our first Star Awards are your definitive 
guide to all creative tools. 


Issue 27 — 
Amapi 4 & Rhinoceros reviewed CD 
Premiere 5 & formeZ 2.9.5 demos. 


Issue 31 — 

Dreamweaver 2, Photoshop Noise & 
Modelling hands in 3D tutorials 

CD Dreamweaver 2, VectorWorks demos. 


Issue 25 - 
Ullustrator 8, Softimage|3D 3.8 reviewed 
CD — CorelDRAW8, FreeHand 8 demos. 


2Da 


oftware — 


Issue 28 — 
Poser, Painter & Photoshop tutorial 
CD Photoshop & Premiere 5 demos. 


Organic 30% 
modelling 


Greate and render this 
using Morte io 


format? 5 fies, demo 
tutorial supplied 


Issue 32 — 

Digital Video, formeZ insect model 
and 3D figure tutorials 

CD Quarkimedia 1.5, formeZ 3demos. 
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| 
* 


Compression 


IF YOU ONLY TAKE ONE PIECE OF ADVICE FROM OUR WEB DESIGN 
SPECIAL, THEN MAKE SURE IT’S THIS: SMALL IS GOOD... 


our dazzling multimedia 
extravaganza of a site may 
look great on your new G3 
y with 128Mb of RAM, but when 
it’s out there on the Web it could well 
be a different story. Yes, it’s true that 
there are a great many technological 
improvements around to speed up the 
Internet — cable modems, satellite 
data delivery, Internet 2 protocols and 
so on — but it’s taking time for them to 


become mainstream. In the meantime, 
it’s up to you to design your site with 
the lowest common denominator in 
mind — and that’s still probably an early 
Pentium with 8 or 16Mb of RAM, plus a 
28.8Kbps modem. 

If you think this is unnecessarily 
restrictive, then there are two points 
you should take on board. First, 
remember that designing for speed 
means that your site will be fast on any > 
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Colour Depth 

This term is used to describe the 
number of colours in an image in 
corresponding bit-lengths. 8-bit 
describes images with 256 colours, 
24-bit images can contain millions 
of colours. 


compression techniques > 


»& Click Here To Visit Our Sponsor 


Internet 2 


Recently launched American Boxtop Software has a neat line in image 


optimisation plug-ins for Photoshop, 
including GIF compressor ImageVice and 
also ColorSafe. Find out more by going 
to w www.boxtopsoft.com 


: “i Why use GIFCruncher? Because it makes your site load up to 90% faster, your 
academic network featuring high files take up less server space, and it provides the best image quality in the 

4 . industry. Faster and smaller means more users, more Pages, and more money 
bandwidth connections and in your pocket -- a lot more. See for yourself - crunch as many images as you 
enhanced communication like, for free. New! You can now crunch GIF, BMP, JPEG, TIFF and many other 


protocols. Internet 2 technology image formats to JPEG using our new site, 
should begin finding its way into Browse to select a GIF from your hard drive, Then click 


Crunch: 
the standard Internet soon. 
aa | __ Browse... | 


Browse a web page, or enter the URL of a GIF, Then click 


Crunch: 
Swann | frctp:77 _Browee.. | 


GIF Cruncher is an innovative subscription service that enables you to compress your 
images on the Web, and you can crunch individual images for free. To take advantage 


of these batch conversion capabilities, subscribe at w www.gifcruncher.com 


system — and super-fast on a top-of- 
the-range setup. Second, remember 
that if your site takes too long to 
appear, the user will get bored, go 
somewhere else and never come back. 


Optimise 


In practice, this means designing more 
or less as you would anyway, but 
making sure that every component in 
your page needs to be there and has 
as small a file size as is possible. 
Images are the main culprits in 
most cases. Make sure you use the 
correct format for the right purpose, as 
either of the two most widely accepted 
standards — GIF and JPEG — can bloat 
when used for the wrong kind of image. 


Compressing HTML 


It’s not just image and animation files that need to be as 
small as possible — your HTML needs to be clean & lean too 


Before delivering your files to the Web, it’s usually worth opening up the code in 
a text editor to make sure you remove the following: 


For example, with their limited 
palette of up to 256 colours, GIFs are 
lousy for complex graphics, but great 
for simple buttons, logos and images 
with large areas of flat colour. 

JPEGs are capable of storing 
millions of colours, but they use a very 
strong compression algorithm to cut 
down on file sizes, which can distort 
images. Therefore, they’re best used 
on photographs or other graphics 
where there’s a lot of colour transitions 
to ‘hide’ this distortion. 


Compress 


Using the right format is half the battle, 
and making the most of that format is 
the next step. In many cases this can 


Exporting JPEGs is a case of trial and 
error in most standard imaging packages. 
HVS JPEG 2.0 is a Photoshop 5 compatible 
plug-in, with which you can set the size 
and quality of a file for export. To find 
out more, point your browser at 

W www.digfrontiers.com 


mean going through a process of trial 
and error, shaving precious bytes off 

a file while trying to keep the quality. 
With JPEG images, the settings you 
select on import from your image- 
processing package are the key to file 
size, though you may have to trade a 
loss in quality for gains in speed. Take 
a look at our walkthrough to see how to 
make the best of your GIFs. EEE 


Compressing sound 


Save space and increase speed by getting savvy 


with sound. The time is now... 


Though you can embed WAV, AU and AIFF sound files directly into your Web 
pages, these formats don’t employ the best use of the available bandwidth. 


» Empty tags. WYSIWYG tools have a habit of leaving alignment and formatting 
tabs throughout your code — so you need to keep an eye out for content-free <P> 
and <CENTER> tags. 

» Repeated tags. Tags that require multiple parameters often get this treatment, 
the <FONT> tag in particular. You'll need to edit them so that all the parameters 
are contained within the same opening tag and delete any extra closing tags. 

» Mystery code. Some visual tools, especially the earlier ones, insert code that’s 
meant for the authoring package rather than the Web. If you come across lines 
that you definitely know are not meant to be there, bin them. 

Going through this process may seem pedantic, but there are dividends. Cleaning 
up your HTML not only makes it easier to read, it also makes it smaller and quicker 
to download. You'll find more on HTML packages on page 86. 
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lf you embed an ambient click or clunk to accompany a button, you.can use 
use one of these formats — but just make sure that the file is encoded at a very 
low frequency. For longer snatches of sound, speech or music, it’s best to go with 
MPEG3, RealAudio or Shockwave Audio. 

MPEG3 is an open format that combines aggressive compression with 
brilliant sound reproduction (up to CD quality) plus streaming features. To play 
them in a browser the user needs WinAmp or MacAmp. These are free encoders 
that convert other formats to MPEG. Check out w www.mpeg.org and goto the 
encoders section for more info. ShockWave Audio is based on the MPEG3 protocol 
and you can create it using the WAV to SWA Xtra bundled with recent versions of 
Director. RealAudio is a popular proprietary format with free conversion tools. See 
the walkthroughs on ps1 and ps8 for more. 


< compression techniques 


Size matters when you're putting GIF images on the Web. Here’s how to think small... 


Work with a limited palette - try limiting 
yourself to 16 or 32 colours. It’s even better if 
these colours are drawn from a Web-safe palette - you 
can do this in most popular imaging programs now. 


illustration 


If you’ve used Web-safe colours, when you 
save you should be able to save your image with 
a custom sub-set of the 216-colour, cross-platform Web 
palette. This is the safest on all platforms for display 
purposes, and probably the fastest download option. 


Py littiede 


If you can’t stick to a Web-safe palette, try 
dithering with Web-safe colours: Photoshop 
plug-in ColorSafe does this (w www.boxtopsoft.com). 
The latest version of Fireworks also enables you to 
draw with ready dithered Web-safe colours. 


In any other circumstances, you should choose 
to save your image using an ‘Adaptive’ palette - 
this constructs a palette specific to your image. Try to 
apply the same palette to all the images that appear in 
your page (so saving the browser remapping colours 
for each image), and use as few colours as possible. 


Try to use ‘flat’ colour, avoiding lots of 
transitions between hues. Even anti-aliasing 
between edges can add many extra colours to the 
indexed palette that you could probably do without. 
If you’re using text (as a logo or in place of HTML 
text), only use anti-aliasing at larger font sizes. 


Use dithering within a limited palette to 
smooth transitions between colours. Be careful, 
though, as dithering images with lots of colour 
transitions increases the eventual file size (even 
with a reduced colour palette). 


As a format for streaming sound, RealAudio is a good way of including multimedia in pages without cluttering bandwidth 


ore ip 
\ 


g 


IC AWINDOWS\Desktop\drone.m i 


You can digitise to RealAudio G2 from your 
sound card in RealProducer, but it’s likely you'll 
want to convert a file from WAV or AU format. Start up 
RealProducer and follow the new session wizard. 
Choose an audio input file & name for your output file. 


| 


Choose a Target Audience - the safest is 28K, 
and then select an Audio Format appropriate to 
your sound file. Then select Single Rate - Sure Stream 
is only for servers equipped with RealServer. 


(3 Output your file by clicking OK. To use in a Web 
page, click ‘Create Web page’. In the dialogs that 
follow you have the opportunity to either embed the 
RealAudio clip directly into your page, or just include a 
standard link. The resulting file document is standard 
HTML and you can edit it in your favourite package. 
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< web special motion pixels showcase > 
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This streetwise presence in the world 
of new media “aims to empower 
the client to take charge 

of their own site”... 
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otion Pixels Ltd is a new media design company 
specialising in the formulation of Internet 
Strategies, innovative web- design, webcasting and 
audio-streaming. The company is over two years 
old and employs nine full time staff as well as four freelancers 
and has established a reputation of innovation through creative 
uses of an array of different technologies. 

Motion Pixels is currently using the latest ‘live’ technologies 
to create sites in the world of literature, education and music. 
The company hopes to advance the progress made in the 
education market by introducing a site, in association with the 
Arts Council of England where authors and students can 
communicate through live debate via the Motion Pixels studio in 
East London. 

“We predominantly use open-source and free software on 
UNIX-based servers running Sun Solaris and Linux.” explains 
Motion Pixels’ Mark Mitchison, “We find that these give us the 
flexibility and reliability that we need.” 

By using portable, freely available software such as Perl and 
Apache and by sticking to open standards such as ANSI SQL, 
Motion Pixels ensures that it doesn’t become locked into any 
one manufacturer's products. In this the team find themselves 
able to pick and choose the best solutions for their clients’ 
needs, at the same time saving the clients’ money. 

“The Web is an interactive medium and one of our goals 
since starting has been to accumulate expertise and tools to 
support this.” says Mitchison, 

The Motion Pixels site builders and designers have 
developed skills in popular Web design software packages such 


< 


motion pixels showcase 


Using ‘Load Movie’ in Macromedia Flash 3 motion Pixels shows you how... 


J file fait View invert Modify Control Libraries Window Help 


First create your Parent movie. This is the 


movie that you use to navigate around your site, 
it would usually hold the buttons, sounds and titles. 


(Jie Tie ew _iasert_ waren Comm Unrates Wanton Tes 


Die fan view insert wooly Cone) Unracee Window Felp 


To embed a flash movie into an existing 
movie select a cell in the timeline and choose 
Modify>Frame... from the menu bar. This will bring up a 
window. Select the Actions tab and click on the + and 
choose Load Movie from the list. You will then have to 
enter the name of the movie you want to embed. 


(poe tae vem nen Meaty Control iireres_Winsow Teo 


4 As you can see this movie contains seven 
sections each with a page of text. If this were 
included in the Parent movie it would increase in size 
quite dramatically. In some cases the user may not 
want to read some of the sections so why make them 
wait to download it?! 


Once the Parent movie has finished displaying 
the embedded movie it is good practice to remove 
or ‘Unload’ it from memory, this is done the same way 
as step 3 but by selecting Unload Movie instead. 


Now it’s time to make the Child movie. 

To make sure the movie is positioned properly 
make sure it’s the same size as the Parent movie. 
Think of this movie as a sheet of glass sitting on top 
of the original one. 


Woterberg Plateau Park, Namibia 

Trygve Cooper at the Royal Geographical Society 
Namibian Black Rhino Fund, NBRF 

Tsavo East National Park, Kenya 

Rhino MayDay ‘99 

Sand Rivers Rhino Project, Selous, Tanzania 


Kaziranga National Park, India 


Now test it out. When your parent movie is 
loaded the Child movie has been placed on top. 
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as Flash and Shockwave, and, on the server side, has 
concentrated on creating a resource for clients to draw on. 
Using freely available tools, the services they now provide 
include include fax from Website services, e-mail-to-fax 
gateways, text formatting tools for pages where layout is 
essential and web-to-database gateways. 

“In making these,” says Mitchison, “our aim is always to 
empower the client to take charge of their own site in order to 
make it work for them with as little intervention from us as 
possible.” That is the Motion Pixels attitude. 

It is this spark, originality and creative attitude that has 
enabled Motion Pixels to create a unique and individual online 
presence for all its high profile clients. Some of team’s recent 
favourites include: Save the Rhino, EMI Music, OFTTEL (National 
Code and Number Change), Saville Row tailor, Richard James, 
The Bug Network and Action 2000. 

“These projects have enabled the company to enjoy exciting 
phases of growth into niche markets and expand its expertise 
into the burgeoning online arenas of webcasting, e-commerce 
and web PR.” You'll find the URLs listed below, so go and play 
with them yourself! GE 


Find out more about Motion Pixels from the homesite at 


Cr) 


In just 30 years 97% of the world's rhino population has been wiped out. A 
combination of poaching and habitat loss has reduced the total world rhino 
population from 500,000 to less than 13,000 


Since 1990, Save the Rhino International (SRI) has evolved into the leading 
non-profit rhino organisation. The charity is committed to ensuring the 
survival of the rhinoceros species in the wild by working closely with local 
communities and providing ongoing support for wildlife managers and 
game rangers. > 


wp 
re 


w Savetherhino.co.uk is a good example of how to manage a 
reasonably large amount of copy in a Website using Macromedia 
Flash’s ‘Load Movie’ command. This basically gives you the option 
of embedding one Flash movie inside another. 


W www.motionpixels.co.uk or by calling t 0171 739 8499. 

Check out the URLs: W www.savetherhino.co.uk W www.bug2000.co.uk 
W www.autonomyrecords.co.uk W www.thebignumber.co.uk 

W www.richardjames.co.uk W www.bugnetwork.com 
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Interactivity 


YOU MAY THINK THAT HTML Is THE LAW — BUT OTHER LANGUAGES AND 
PROTOCOLS CAN MAKE SITES MORE RESPONSIVE TO USERS NEEDS... 


or a medium that’s 
hyped as being at the 
sharpest part of the 
f cutting edge, the Web 
can be surprisingly static. Too 
many of the sites you encounter 
could easily have been distributed 
as a brochure or, more likely, a 
slim pamphlet. What they lack is 
interactivity — a term that, though 
often used, is rarely explained. 
A Web page or site is 
interactive if elements can be 


changed or navigated in response 
to user input. The highest level of 
interactivity many Websites have 
are simple navigation tools, even 
though the medium allows for 
much more sophistication. 

Most of that power doesn’t 


come from HTML: rather, it comes 
from the its ability to call other 
languages and embed external 
objects into pages. You can use 
Java applets, Cascading Style 
Sheets, JavaScript, Shockwave 
and other plug-in protocols to 


“The latest drag-and-drop authoring 
tools mean you can insert interactive 
elements into pages quickly & easily...” 


XML - the next generation 


xX has some of the techy 
elements of the Web community 
inalather at the moment. Standing for 
‘eXtensible Mark-up Language’, it’s 
similar to HTML in that it uses 
encapsulated tags with additional 
parameters to describe content. 
However, XML differs in that it has no 
pre-defined function enabling you to 
create additional functions from 
scratch — and, by extension, create 
your own specific new mark-up 
languages to suit specific tasks. 

There are several task-specific 
scripting languages that are XML- 
compliant, including Microsoft's CDF 
(Channel Definition Format) and the 
W3C’s dynamic version of style sheets. 


that XM 
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Dy Dale Drugherty 
In this RealAudio interview, Tim Brky and Larry Wall dis. 


Internet Explorer 5 has some support 
for XML, while Adobe and SoftQuad 
have both incorporated support for 
the definition language in their latest 
document creation tools. 

So why should you care? XML, 
unlike many of the hyped languages 
and protocols that have failed before, is 
as fast and easy to implement as HTML 
— only it’s far more flexible. It isn’t likely 
to replace HTML either — rather, you 
should use it to act as a container for 
other languages and standards — 
including some that don’t have any 
direct support on the Web now. It 
remains to be seen how robust /E 5’s 
implementation is, and if Navigator 5 
(due before 2000) can match it. 


New XML Editing Tools 


Will XML create new demand for XML editing tools? In 
this srticle from the Seybold Report on Internet 


by 
Ie XML just so much hype? Another market opportunity 
that will fail to materialize? Analyet Adina Levin answers 

XML is not really a market at oll Instead, XML enables 
applications, and these applications will require new 


An Interview with Tim Bray and Larry Wall 


6 how the Pert 


programming language can do powerful text processing with XML. 


Column: 


: Oasis and the Robins of Spring.. Big Black and Blue. Fury in 


XML is the next generation of languages for the Web - specifications, browser 
support details and info on authoring tools is available at w www.xml.com 


“Unlike many hyped languages and protocols 
that have failed, XML is as fast and easy to 
implement as HTML - and is far more flexible” 


enhance the level of interaction users 
can have with a Website. What’s more, 
it doesn't have to be difficult to do 
either. The latest drag-and-drop 
authoring tools mean that you can 
insert interactive elements into your 
pages quickly and easily. 


When to use more 


At the opposite end of the spectrum 
are pages that use interactive 
elements for the sake of it: sites that 
open with an alert box asking for your 
name, or with Java applets displaying 
the current time. Web design combines 
graphic design ability with interface 
building skills. Think about the purpose 
of an interactive element first, then 
make sure it looks good. 

In some cases, you may use be 
using ‘off-the-shelf’ elements in your 


pages — ready-made code. If this is the 
case, then you need to make sure you 
can bend it to your purposes and 
customise the appearance before you 
incorporate them into your site. For the 
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he perfect visual tool for people who see the world in code. 
TRY ITFREE. CLICK HERE. 
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Ww www.dhtmizone.com is the best resource for JavaScripting tips and tutorials 
for both Netscape Navigator and Internet Explorer. 


rest of this article, we’re going to 
look at the advanced languages and 
standards that can help make your 
Website less static. 


HTML & CGI 


HTML can be more interactive than 
many realise. HTML 4.0, the current 
official version from the World Wide 
Web Consortium (W3C), has Dynamic 
HTML-like support for media objects as 
standard. The next wave of browsers 
should comply to this standard, though 
how closely remains to be seen. So far, 
neither Navigator or Internet Explorer 
fully support the W3C specs for 
Cascading Style Sheets. Other 
additions to HTML 4.0 include the 
ability to capture key presses and 
update document attributes on-the-fly. 
Confusingly, the acronym CGI 
means something different in Web 
design than it does in the rest of the 
computer design world. The letters 
stand for ‘Common Gateway 
Interface’; a protocol built into the 
Hypertext Transfer Protocol (http) 
that enables Web pages to send 


JAVA — hyped white elephant? 


f ) ava: the powerful programming 
language that treats your Web 
browser like it’s an operating system. 


Related to JavaScript in name only, Java 
applets are fully-compiled programs 


that are interpreted by a ‘virtual 
machine’ on any computer. 

On paper, Java looked like it was 
going to change the way people use 
computers — and now that set-top 
boxes and WebTV are beginning to 
appear in shops and homes, it may still 


have its day. As far as the Web we know 
and love, though, it’s been used, abused 
and trivialised to the point that it’s no 
longer easy to take Java seriously. 

As a general purpose, object- 
oriented language, Java isn’t designed 
for multimedia — but that hasn't 
stopped companies from creating Java- 
based Web authoring tools. However, 
they all suffer from the same problem: 
Java applet files are often bloated, 
taking ages to download and initialise. 
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=> parameters to small programs on a 
Web server called CGI scripts. You can 
write CGI scripts in just about any 
computer language, though the most 
popular is a scripting language called 
PERL. Only the results are sent to 
users and these are transmitted in 
HTML (when visible), or passed as 
variable parameters to JavaScript. 


| >WRITE JAVA APPS WIT 


DIRECTORIES 


Multi-lingual? 


Don’t panic — you won't have to learn 
yet another language. CGI is the oldest 
and most well established protocol for 
interactivity on the Web, and there are 
lots of freebies. These fall into two 
categories — scripts that are hosted, 
and scripts that aren’t. 

CGI scripts need to be hosted on 


W www.gamelan.com is the home of a huge Java applet archive with links to free 
JavaScripts too. Our advice is to bookmark it now. 


ISP already hosts CGI scripts for you can use for free. There are also 


a Web server in a special directory in 
order to work — though the good news 
is that it doesn’t have to be your Web 
server if you don’t have administrator 
level access. Chances are that your 


processing mail forms, counting page 
hits and so on. 

Some other sites host CGI scripts, 
like bulletin board systems (similar to 
the Computer Arts Forum page), which 


archives of unhosted scripts that need 
to be installed on a Web server before 
you can use them. If you're not the 
administrator of the server your 
Website lives on, you'll have to ask 


Rollovers: they do exactly what you think 


Rollovers, buttons that animate as the user passes their mouse over them, are ubiquitous on the Web. Most drag-and-drop 
authoring now automates the process. Here, we take you through a few tips to make sure you get the best out of them... 


If you can, create a limited palette or swatch 
for your buttons when you start. If you rely on 
your editing program to choose colours on export, 
you may end up with subtle, yet noticeable changes 
between button states that you didn’t intend to animate. 


o. Arollover button consists of between two and 
four separate images. Whether you’re using a 
drawing package like Illustrator or an image-editing 
program like Paint Shop Pro, create image one first - 
then use that as a template for subsequent images. 


6. Keep button images small - aim for 3K or below. 
Using JavaScript the other states pre-load — but if 
the files are too large there may still be a delay, or even 
no response when the user clicks on the button. 


She stetedsceinarbartedct gf 2) Alon [Browser Oetae 


3 a 8 Ma 


[4 By the same token, if only a small section of 
your button is affected by the rollover, slice the 


button into pieces and only animate that section. The DON’T want to use the ‘ALT’ image tag. Modern 


Using rollovers is the one case where you 

Co. For extra-fancy rollovers, try using an animated 
GIF as the rollover stage of your animation. Keep 

the file size down by using a maximum of six frames 

and compressing the file as a much as possible. 


advantage here is that you’re more likely to be dealing 
with very small file sizes, and transition delays 
shouldn’t prove to be a problem. 


browsers display the contents of the ‘ALT’ tag as a 
floating tool tip. This can get in the way of your 
rollover animation and looks sloppy. 
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SGML - Mark-up language for 
electronic documents that was the 
precursor to both HTML and XML. 


Plug-in —A helper app that your Web 
browser calls on when it comes across 
non-standard content it doesn’t know 
what to do with. Navigator and 
Internet Explorer both support them. 


W3C -The World Wide Web 
Consortium is an organisation 
responsible for developing and 


authorising protocols and scripting 
languages on the Web. 


PERL - Scripting and batch processing 
language originally used on UNIX 
systems, now popular for CGI applets. 


“If DHTML is the PostScript of the Web, then 
JavaScript, with its ability to communicate, 
store info and respond to users, is its Lingo...” 


them nicely to install scripts for you. 

Despite the introduction of 
Dynamic HTML in Navigator and 
Internet Explorer 4, JavaScript 
continues to thrive as the key add-on 
to HTML. In fact, close inspection of 
DHTML shows that, far from being a 
protocol in its own right, it depends 
closely on older scripting standards to 
thrive. Though the Microsoft and 
Netscape implementations of DHTML 
differ in significant ways (and are 
incompatible), they both do much the 
same job. By making elements in a 
page uniquely identifiable, they 
transform HTML into an object-oriented 
scripting language — and the language 
used to manipulate these objects is 
invariably JavaScript. 


JavaScript is go! 


JavaScript is the language that’s used 
to create rollover buttons in PageMill, 
Adobe GoLive! and Dreamweaver. If 
HTML is the PostScript of the Web, 
then JavaScript, with its ability to 


a 


communicate with media elements in 
Web page, call pre-defined functions, 
store information in variable strings 
and respond to user input, is its Lingo. 
Not quite a fully-fledged programming 
language, but more powerful than a 
mere scripting language. 


Shockwave 


Other companies have come up with 
plug-in standards designed to add 


more interactivity to the Web — but only 


one has made any real success. With 
Shockwave, you can put just about 


anything you can create in Macromedia 
Director on the Web. The latest version 
produces files that are faster and more 


streamlined than some pages made 
with HTML alone. The catch is you 
need a copy of Director — which costs 
around £1300. Using Macromedia 
Flash is a more economical solution, 
and exports even smaller Shockwave 
files. The latest revisions of both main 
browsers come with the Shockwave 
plug-in already installed too. 


< interactivity tutorial o web special > 


Shockwave Flash has totally changed 
interactive presentations on the Web - 
it’s now possible to include fully-fledged 
multimedia in your pages without 
sacrificing bandwidth. 


The scripting or authoring 
method you choose to increase the 
responsiveness of your pages will 
depend on the needs of your site, plus 
the normal constraints of time and 
money. It’s worth the effort whatever 
you choose, though. Pages that 
engage users will bring them back for 
more — and this should be your goal 
every time you design a site. FE 


4.3.3 Webtools 


W www.freeguestbooks.com is one example among many of the free hosted 7 re | 
CGI resources you can find on the Web. Take a look for yourself... ! 
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Real media 


WANT TO PUT REAL-TIME AUDIO AND VIDEO ON YOUR WEBSITE? TIME 
TO GET FAMILIAR WITH THE REAL FORMAT AND START STREAMING... 


ealNetwork’s RealAudio format 
revolutionised sound on the Internet when 
it first appeared three years ago. Real’s 
‘streaming’ technology meant that surfers 
equipped with a RealAudio browser plug-in could hear 
sound over the Web in real-time - no more lengthy 
downloads. The sound quality may have been tinny 
and connections congested, but it was enough. Music 
industry eyes were opened to another media channel, 
Internet radio stations were invented, and Real has 
made its format the standard for streaming media 
over the Web around the globe. 

Now all grown up — and in its latest incarnation 


ig 


called Rea/System G2- the technology has come on 
considerably. G2 provides near-CD quality sound, and 
can stream video, as well as WAV files, AVI files and 
many other popular non-streaming file types. With a 
user-base of 21 million users, it's hardly surprising 
that even rival formats like Flash and Liquid Audio are 
supported by the latest version of RealPlayer. 


Nothing better than the Real thing 


RealSystem G2 consists of three main parts. Real 
files are created using RealProducer software, and 
played on a RealPlayer. The third part is Rea/Server, 


The competition 


Microsoft has made a late and ‘enthusiastic’ entry 
into the world of streaming media services, based 
around its Windows Media Player. Bundled with 
Internet Explorer, the WMP plays Real files and is 
supported by a variety of serving and coding 
solutions. You can find out more by going to 
Wwww.microsoft.com/windows/windowsmedia/ 
Macromedia's Shockwave technology also 
enables streaming media, and you can create files 
directly from Macromedia’s popular set of 
multimedia authoring tools. For more info, check 
out w www.macromedia.com/shockwave/ 


To stream or not to stream? Software giants 
Microsoft & Macromedia are in the arena too. 


The Real Guide at w www.realguide.com is a great place 
to go for cool streaming content. 


Web server software, specifically designed to host 
and serve Real media using its RTSP protocol. If your 
site is liable to be busy, and you anticipate several 
people wanting to listen to sound clips at the same 
time, you need to consider installing Rea/Server on 
your Web server. Either that, or you need to move your 
site to a service provider with Rea/Server already 
installed — you'll find that most of the big hosting 
services support the software. 

Be warned, though, that installing any software 
on a Web server is not something you should attempt 
to do unless you're experienced in setting up and 
maintaining Web servers. A limited version of 


How Puch 
Do You Want 
to Save Today’ 


i} 
Sapemenpees © The best quality 


RealVideo 


® Hifi audio quality with 
graphic EQ 


@ Control picture quality 


© Just $29.99 with money 
back guarantee 


Download Now 


Aes | aces 


ean needs. heer tear 
Download 


RealSeners | Ne 
for broadcasters, ISPs RealProdueer G2 fr 
Corporate enterprises | everyone Find all you 


oreven hobbyists. —_ | need at the Tools site 


Everything you need to get started with streaming 
media is available from from Real’s Website. 


RealServer is available for free, and provides 25 
‘streams’. This means that up to 25 people can 
listen to the same clip at the same time. 

However you can stream Real files using the 
same http protocol that delivers Web pages, 
bypassing the need for server software installation — 
and the results are fine if you’re not expecting huge 
amounts of traffic. Try out the walkthrough to find out 
more about streaming RealAudio and RealVideo — all 
the CD files you need are in the Tutorials folder. 


For more information about the many products produced by 
RealNetworks, check out W www.real.com 


< real media tutorial 4 web special > 


Streaming 

Astreamed file starts playing as 
it’s downloading, whereas non- 
streaming files require you to 
download the whole file before 
you can play it. This is achieved by 
cutting the file into a series of 
individual sounds or pictures 
small enough to be sent to your 
computer one after another, and 
small enough that you can play 
them in real-time as they come 
into your machine. This gives the 
impression of aseamless, 
continuous video or audio clip. 


Plug-in 

Ahelper application that your Web 
browser calls on when it comes 
across a particular file type that it 
doesn’t know what to do with. 

The latest versions of the major 
browsers come equipped with 
support for RealMedia. 


web design special | computer arts | 59 


< web dent) 


real media tutorial > 


Stage one: Streaming RealAudio 


Preparing and streaming RealAudio files using the http protocol... 


G2 for Windows 95 


Download and installation instructions: 


Download ReaiProduc: 


Tokyo, Japan 
Melboune. VIC 
Australia 
Hong Koos 
Tapet Taiwan 
Bangkok. Thatend 


Sunganore 


Helsinks. Fintand co 
anh) 


So Paulo, Brasil 


CG. Scoot along to RealNetwork’s Website at 

Ww www.real.com and grab a copy of the free 
RealProducer G2 authoring kit. You’! find it in the 
‘Tools’ section of the site, but it’s pretty well hidden. 
Real heavily promotes the souped-up versions that 
cost money. 


Target Audience: 
ceeneareniace colin submpes cxes A emanict 
‘connections. 


different Select one or more Target 
Audiences that you would like your RealMeda clip 
‘optimized for: 


FF eK Moder 

T 56K Modem 

1 Single ISDN 

T Dual SON 

T~ xDSL/Cable Modem 
T~ Conporate LAN 


Co. RealProducer asks you to select the required 
file type. If you plan to place the files on 
RealServer, select SureStream. If you pian to stream 
using the http method, choose Single Rate. Next, 
select your Target Rate - the speed at which most 
people will be accessing your Website. Unless you’re 
sure that all of your audience will be accessing your 
site through a high-speed network, stick with the 28.8K 
option. It’s still the rate at which most people connect 
to the Internet, especially in the UK. 


Select « Recording Wiead lor the media clip that you want 
to create. 


i=] © Fecord Fier ie 
picker ered dene ag 
rm eg moc obo es 


Ireut Source: 


Meda Cip Intormation, 


a ce) 7 Record Fiom Media Device 
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med 
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Locate and launch the file you downloaded and 
install RealProducer on your machine. The first 
time you start the software, you'll be greeted with a 
screen asking you to select a recording wizard. Using 
a wizard is a quick and easy way to get started - 
choose the ‘Record from file’ option and click OK. 


Output File: 


Enter eRe Des omnteae oe 0 Seu fe 
to create, or click Save As. 


File Name: 
IC-AWINDOWS\DESKTOP\artsmusic.1m 


Select the type of sound file you’re recording. 
(The file from our CD is artsmusic.wav). Now 
enter the name of what you want the resulting Real 
format file to be called. It must end with the .rm 
extension. Hit Finish at the next screen. 


RealMedia Clip Information. 
Pret liebe 
Rested clip 


to create. sol 
Gaaoon nie Ciiotadn te fesPine: 


CG. RealProducer prompts you to browse for 

a source file. From the CD, select the file 
artsmusic.wav — it’s a Windows WAV file, the most 
popular Windows sound format. Click Next and fill in 
the details of the track. This information shows up in 
the RealPlayer when it comes to play the file. Now 
click Next again. 


Fie View Corot: Took Options Help 


oC. Hit the Start button in the lower left-hand 
corner of the RealProducer interface. 
RealProducer starts to encode your file and will 
confirm when it has successfully completed the task. 
That's it! The encoded file artsmusic.rm then displays 
its allegiance by displaying a tiny Real icon (on the CD). 


nn; 77 www .yoursite.con/real_audio/artsmusic.ra 


Filename — farsmetatie? ram (sxe J 
Gave as type | Text Documents hd Cancel | 


CG. Now it’s time to get it onto a Website. Upload 
the .rm file into a directory using your FTP 
program, just as you would a normal .html Web page. 
Now we have to place a link to the .rm file in your Web 
Page. If you’re planning to use http streaming, instead 
of linking directly to the .rm file, first create a Metafile 
-a text file saved with a .ram extension that contains 
a link to the .rm file you want to stream. 

W http://www.yoursite.com/real_audio/artsmusic.rm 
No HTML code is required. Save with a .ram extension, 
and upload to your Website. 
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<HTML> 
<HEAD> 

<TITLE>Real Audio Demo</TITLE> 
</HEAD> 


<BODY><br><br> 
ch2><A HREFs"http: //www. yoursite.com/real audio/artsmetafilel.ran“> 
Click here to hear my demo in Real Audio</A></h2> 


</BODY> 
</HTML> 


CG. Now all you do is make a link in your page to 
the meta file as you would link to any other Web 


page: <A HREF="http://www.yoursite.com/real_audio/ 
artsmetafile1.ram”>My first Real Audio clip!</A> 


Co. Bingo! Clicking on the link should launch 
RealPlayer automatically, and your music now 
starts to stream. Clever, eh? 


Stage two: RealVideo 


< real media cutorat QD 


Creating and embedding RealVideo —- make sure your browser has RealPlayer installed for this... 


Record From Media 


Welcome to the RealMedia Recording Wiad, This 
wizard will guide you through the creation of a RealMedia 
clip from a media device connected to your computer 


First. prepare the media device. such as 3 Microphore. 
Video Camera, CD Player. or VCR. that you will be 
capturing from. and then select the inputs that you want 
to capture, 


Input Source. 

Capture Audio 

M Capture Yideo 
© Using Media Device Connected to Video Capture Card 
© Using Video Camera Connected to Extemal Port 


Co. You can record video directly into 
RealProducer from an external device such as a 
video recorder or camera. RealProducer also converts 
popular formats like AVI and QuickTime. If you plan to 
use your own video files, make sure the quality is as 
good as possible before you start the encoding 
process, and capture at no higher than 15 frames per 
second. Alternatively, use the sample QuickTime clip 
serennisima.mov from the CD-ROM. 


hetp: //wnw, sonicstare.com/dna/videos/serenissima. rm 


Save As 


121) 
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Save in: 


Filename: — |setenissima rpm 
Save as type: [ATL Documents Ed Cancel 


While launching RealPlayer is fine, some 
people prefer to embed the video in the Web page 
itself, negating the need for a separate Play window. 
You can embed the video clip and RealVideo controls 
using HTML. Start by creating a new metafile 
containing a link to the .rm file exactly as before, 
but save it with a .rpm extension instead. 


mm> 


CHRAD? 
TITLED nettle: 
</MEMD> 


1 /TETLE> 


<BoDr> 


<EMBED UIDTH*176 HEIGHT#192 sRC* 
“netpt //uw, soni cstate. con/dis/videos /serenissine. rpm” 

CONTROLS+InageWindow CONSOLE: 

ENDED SHCo"netp! //wwu. senicseace.cou/dna/Videos/sexenissine. pa” UIDTHA26 MEIGHT+26 HOSATACEEUe 
COMTROLS*PiayButcon CONSOLE¥one> 

<EYBED SRC="heep: //mww. sonicecare. con/dna/videos/serentssiue. rpm” WIDTH=26 MEIGHT+26 WOJAVA-teue 
COMTROLS=StopButton CONSOLE*one> 


</e0D> 


</BODY> 
cami 


CG. You can add more precise controls using 
further <EMBED> tags. Each <EMBED> tag must 


carry the same SRC element as before. Remember to 
remove the AUTOSTART=TRUE parameter from the 
original <EMBED> tag. If you don’t, you'll find that it 
overrides the buttons. 


Co. Use the RealProducer Wizard as before and 
follow the prompts. RealVideo files are saved 
with the same .rm extension as their RealAudio 
buddies. Now start the encoding process. 


<HTML> 
<HEAD> 

<TITLE>Untitledk /TITLE> 
</HEAD> 


<BODY> 

<EMBED WIDTH=176 HEIGHT=132 SRC= 

"http: //www, sonicstate, com/dna/videos/serenissina. rpm” 
CONTROLS*ImageWindow CONSOLE*one> 

</BODY> 


</BODY> 
</HTML> 


CG. Upload the .rpm file to your Website. Now use 
the <EMBED> HTML tag to place the video in the 
page. The <EMBED> tag has an SRC element just like 
an <IMG> tag. The SRC tag should point to the .rpm 
meta file. You must specify a height and width for the 
Video window. For a 28.8K modem, you should stick 
with 176x132 for best results. 


Stop Refresh Home 


i ies fer http: //www.soniestate.com/dna/test. html 
eee 


val a fl 


CG. You can specify whatever height and width you 
like for the buttons, and there are several to 


choose from - including the Rewind and Volume Slider 
functions. You can find a list of controls on Real’s 
Website at w www.real.com 


Co. Create a .ram metafile pointing to the .rm file 
as before. Link the .ram file from your Web page. 
Clicking on the link launches RealPlayer as before and 
plays the clip. You visit the above Web page at 

Ww www.sonicstate.com/dna in the Videos section. 


=J Untitled - Microsoft Internet Explorer 
1 File Edit Miew Favorites Tools Help 


>  @ 2 4 


s Forward - Stop Refresh Home 


CG. You should now be seeing a Window with a 
Real logo - not that useful. Add the parameter 
AUTOSTART=true to the <EMBED> tag. Now the clip 
plays automatically when you load the Web page. 


http://www. sonicstate. cq 


Alternatively, 
you can use 
one <EMBED> tag to 
fi} put a whole set of 
controls on the page 
in one go. 


ruadl +s 


Clip Info:|La Sere # 


<EMBED WIDTH=176 
HEIGHT=132 SRC 


="http://www.sonicstate.com/dna/videos/ 
serenissima.rpm” NOJAVA=true CONTROLS=ALL 
CONSOLE=one> EX 
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< web © the hub communications > 


oe herholdt 


Amongst The Hub’s 
impressive client list are: 
(clockwise from right) Frank 
Herholdt Website at w 
www.frankherholdt.co.uk, 
The National Portrait 
Gallery’s instore Portrait 
Printer (an interactive 
kiosk), DHL’s Red Planet 
Website at w www.dhi.co.uk 
and Woolworths 
Entertainment interactive 
TV shop on Open.... 


WOOLWORTHS ENTERTAINMENT 


“ H (1) New, Releases 


(2) Music 
(3) Videos 


Founded in early 1995, The Hub 
Communications Company is a firm 
of e-consultants specialising in 
strategy, design and development... 
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Warp Speed 


SpeedBooking 


THE QUICKEST WAY TO BOOK THE FASTEST DELIVERY 


Welcome to DHL Red Planet...This Week ju 


his slick new media company is an astonishing 
success story — success born from keeping on the 
button with technological developments and offering 
clients new options and services. In adopting a holistic 
view of new media channels — Interactive TV, Internet, Intranet, 
Extranet, kiosks, CD-ROM, mobile phones and smartcards, The 
Hub has enabled each medium to complement the other. 

“In realising our clients’ aims and ambitions, we regularly 
implement economic modelling, e-commerce strategies, content 
and interface design, database design and integration, on-line 
marketing and evaluation,” says The Hub's Amelia Hoseason. 

With 42 years in marketing & communications, The Hub’s 
three principals have sat for a total of 20 years on the boards of 
several Top 10 ad agencies, plus an international FMCG 
company, contributing to the success of over 45 famous brands. 

“Our 30 staff include highly experienced, award-winning 
specialists in strategy and planning, Web applications development 
and systems integration,” continues Hoseason. 

“As the on-line market place becomes more competitive, 
we’re determined to differentiate ourselves and our clients, with 
products and services of the highest creative order and quality.” 

The current impressive client list includes, among others: 
B&Q, Cellnet, Comet, Compaq, Coca-Cola, Corporation of 
London, DHL, Discovery, ICI, Kingfisher, National Portrait 
Gallery, Penguin, PPP, Polygram, Reuters, Samsung Cameras, 
SmithKline Beecham, Sky, The Tate Gallery & Woolworths. EE 


To find out what The Hub can do for you, visit W www.thehub.co.uk or contact 
Briony Mathieson on t 0181 560 9222 or @ enquiry@thehub.co.uk 
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One: Comet’s Objects of Desire 


‘Objects of Desire’ is a microsite within the e-Comet Website (wwww.comet.co.uk). Regularly updated, 
it showcases up to 30 products ‘of desire’. The Hub shows you how... 


OB sects oF Demme 
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S The main image where the product is displayed 

The splash page contains symbols for each is divided into a table (in Photoshop), making the 

section of the site (Capture, Living, Interact, The next stage is then to divide up each Website faster and more efficient during rollovers and 
Watch and Listen). They’re animated using JavaScript. section into five frames. image changes. 


Two: Product insertion 


Each time a product is inserted into the microsite, it goes through different stages... 


= buttons2jpg @ 


Four detail 
buttons are 
created from these 
images, and then 
positioned correctly 
using grids. 


SoS. Four aspects of the product are selected for 
The product has to be cropped to a specified the rollovers, and have to be cut from a high- 
size to ensure it fits within the central table cell. resolution version of the image. 
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Now only three of the table cells have to be When they roll over these buttons, users can view the four previously selected details of the Object of 
modified when a new Object of Desire is displayed. Desire. The Hub used JavaScript for the rollovers - Web know-how in action. 
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GOLIVE 4.0 iS ADOBE’S FIRST 
EDITION OF THE WEBSITE DESIGN 
TOOL FORMERLY KNOWN AS 
CYBERSTUDIO, AND THE FIRST 
CROSS-PLATFORM VERSION... | 


dobe is attempting to do for 
the Web what /I/ustrator and 
Photoshop have already 
achieved in print media with a 
new site design tool. GoLive 4.0 is aimed 
at traditional graphic designers rather than 
programmers, owing to Adobe's belief 
that it’s content rather than underlying 
technology that makes top Websites 
popular and successful. 

That’s not to say GoLive 4.0 eschews 
the latest developments in Net standards. 
It supports emerging technologies such as 
XML (eXtensible Markup Language) and 
Microsoft's ASP (Active Server Pages), and 
includes a new set of JavaScript actions 


“GoLive’s key feature is its emphasis on 

visual design — this enables designers to 

focus on style without having to slave at 
the coal face of HTML programming” 


Fe IS) eee ye) ee eT 


b Welcome to Luaka Bop Records 


GoLive 4.0 is right up to date with new Internet technology, as you would 
expect. For example, the DHTML Editor (Dynamic HTML) enables you to 
create animations by dragging floating boxes on the screen. 
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enabling designers to add more interactive 
elements to their Websites. 

GoLive 4.0 is the latest version of 
what started out in 1997 as CyberStudio, 
and the first to be published by Adobe 
since its acquisition from GoLive Systems. 
Perhaps its most significant feature is its 
emphasis on visual design — this enables 
skilled designers to concentrate on style 
without having to slave at the coal face of 
HTML programming. The software’s Layout 
mode enables you to position design 
elements precisely on a page, and then 
switch directly to the HTML code. A 
Preview mode also shows how the page 
appears in different Web browsers. 


Cross-platform edition 


Adobe has designed GoLive 4.0 so that 
Websites appear the same regardless of 
the Web browser or computer used to 
display them. Significantly, GoLive 4.0 is 
the first cross-platform edition. Versions 
for Windows 98 and Windows NT will be 
sold alongside a Mac edition, which up 
until now has been the only platform 
available. Design teams will now be able 
to ensure a coherent appearance for parts 
of a site designed by different people, 
regardless of platform. 

While the software has always mixed 
creation tools with site management, 
GoLive 4.0 further reduces the need to 
use separate applications to produce 
content. For example, the software 
includes a new QuickTime Editor that 
removes the requirement to use separate 
authoring applications. The Editor enables 
you to create new QuickTime movies and 
alter existing ones by enhancing them with 
filters and transitions. You can also drag 
audio tracks, video clips, sprites and other 
multimedia elements from a palette and - 
drop them directly into the Editor. 

Despite the comprehensive nature of 
GoLive 4.0, the new edition isn’t intended 
to replace Adobe’s other Web design tool, 
PageMill. Adobe is now targeting PageMill 
at home and small business users, while 
GoLive is intended only for professional 
designers — with price points to match. 
GoLive costs £210 for the full version 
compared to the £93 charged for PageMill. 

By making site creation so similar to 


New features _ 


> Nothing is morellikely togivea 
Website a bad image than out-of-date 
links. Adobe has addressed this problem 
in GoLive 4.0 with an Enhanced — 
Dynamic Link Manager, which notifies 
you when a reference has changed and 
then automatically updates all the links 
in the site. 

> Table editing is also made easierin 
GoLive 4.0. You can select multiple 
different cells and columns, and change 
font size and colours. What's more, cells 
don't have to be in a continuous block to 
select them. You can also import ASCII 
text files into tables, as well as data 
de-limited by tabs and commas. 

> Vqis also up to date with the latest 
Net technologies such as JavaScript. The 
new version includes Actions Plus 1.0, a 
pack of 14 most commonly requested 
JavaScript actions for making sites more 
dynamic without writing code. 

» The Layout View remains at the heart 
of GoLive 4.0, and this enables designers 
to produce pages using afamiliar- 
looking grid and ruler. From here, you 
can access the Cascading Style Sheets 
(CSS) Editor. Through this, you can 
change the look of the entire site ey 
altering the style sheet. GoLive 4.0's css 
Editor contains all the properties 
recommended by the W3C, the Web's 
standard-setting body. 


QuickTime Plugin 

1 Video (QuickT ime) 

no a 
y vspace [0] 

Align its Hidden 


You no longer need separate apps to put 
QuickTime on your site. The built-in QT movie 
Editor enables you to import & edit movies. 


the traditional digital design process, 
Adobe could encourage firms to use more 
artists in the design of their Websites. 
With any luck, that could well translate 
into livelier, better-looking pages. HANS 


Adobe GoLive 4.0 is available now for Mac, and the 
PC version is expected very soon. Full price is £210, 
and you can upgrade for £140. For more information, 
call Adobe on t 0181 606 4000 or check out its site 
at W www.adobe.com 
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WIN A COMPLETE WEB DESIGN & GRAPHICS CREATION BUNDLE — WORTH £1090 — COURTESY OF A 
Adobe 


n the world of computer design, even the most 

creative mind won't get far without the right 

tools. You'll soon find that while some of the 

software on the market is highly specialised — 
being specifically tailored to do certain jobs efficiently 
and effectively — there are other powerful applications 
that you can use for a variety of purposes and across 
a broad range of media. 

We’re here to solve all your software woes, with 
one special bundle that crosses the boundaries, 
provided by Adobe. Up for grabs here are some superb 
tools that you can use for Web design, plus other 
design and illustration jobs to boot. 

Adobe GoLive 4 is the first dual-format incarnation 
of the leading professional Web design and authoring 
tool since Adobe bought out CyberStudio from GoLive. 
Its average street price is £210, and you can read all 
about its new features on page 64. Illustrator 8 is the 
hugely popular vector drawing tool, ideal for creating 
graphics — its ASP is £350. And what can we say about 
Photoshop 5? Indisputably the world’s best image- 
editing package, its ASP is £529, and we see fit to 
write entire magazines about it. More info from 
Ww www.adobe.com 

Now, to win this fantastic bundle, all you need to 
do is select A, B or C. What are you waiting for? 


i 


The competition 


To complement its current suite of graphics 
applications, Adobe is currently putting the finishing 
touches to a new layout software title which looks set 
to take the publishing world by storm. Is it: 


A — Adobe InDesign 
B — Already BinDesigned 
C — Adobe Dobedobedoo 


To enter 


Try the easy way via the Web: 
1) Insert the Web Special CD 
2) On the Contents screen, click ‘Current Compo’ 


3) Put ‘Adobe Bundle’ as the competition name, fill 


in the rest of the form and click ‘Submit Entry’. 


Alternatively, if you don't have Web access you can 
submit your entry on a postcard to: 

Adobe Bundle competition 

Computer Arts Specials, Future Publishing, 

29 Monmouth Street, Bath, BA1 2DL. 


State whether you're PC or Mac based, and 
remember to include your address and a daytime 
telephone number if possible. 


The rules 


Closing date for all entries is 31st July 1999. 
Employees of Future Publishing, Adobe, their agents, 
or their families may not enter. No multiple entries 
will be accepted. The editor’s decision is final, there 
are no cash prize alternatives, and no other 
correspondence will be entered into. HS 
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ultimate 


magazine for compuverDasec! 


creatives 


ar Sea Every month, Computer Arts brings 
arts — you the latest in.. 
jst el c > Graphic design 
Ntastic imageiin > > Illustration 
>» 3D modelling & animation 
> Image-manipulation 


>» Multimedia & Web design 
> Digital video 


> Issue 33 on sale 17" June 
> Issue 34 on sale 14" July 


Computer Arts step-by-step 


Covering every angle of computer-creativity, here’s how we make Computer Arts magazine work for you... 


ings 
4 


i 
t 


Steve Rawlin 


Co. Every month Computer Arts brings you at least Co. To help you make your artwork even better, To make sure you've got your hands on the best 
three major tutorials, showing you, step-by-step, we bring you the latest and greatest artwork possible kit, every month we review the new 

how to get the best from packages such as Photoshop from around the world. Here, book jacket illustrator creative software and hardware available for your PC 

- but also covering topics such as 3D modelling and Steve Rawlings shows how he brings his images to life. | and Mac - our scoring system sorts the wheat from the 
rendering, multimedia and Internet design, plus Along with a host of newcomers, other big names that chaff. Add to that a group test every issue, plus a 
illustration. Each tutorial is accompanied by a software have featured in CA include The Designers Republic, monthly-updated full Buyer's Guide listing on the CD, 
demo and image elements on the CD-ROM. The Attik, Stylorouge, Vaughan Oliver and many more... _ and you can go shopping in confidence! 
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Subscribe 


<@ Computer Arts 


Salve 25” 
WD L@ 


No-nonsense, no-frills, no-gimmicks 
money-off deal... 


Normal rate for 6-issue subscription: £30 

Special offer 3-issue subscription: £22.50 

Normal rate for UK 12-issue subscription: £60 Special offer 12-issue subscription: £45 
Special offer 12-issue subscription for Europe: £73.53 (save £10 on normal rate) 
Special offer 12-issue subscription for Rest of World: £86.53 (save £20 on normal rate) 


ar 


GS 


Getta 
Limited 
Edition 
COVEr 


All Computer Arts 
subscribers 
receive a unique 
limited edition copy 
with the cover 
image intact 
and uncluttered 
by words. 


Hl a biggest- r creative — ¥ Mic & PC 


< subscribe & save eS web special > 
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How to subscribe: 


> Complete, detach and return 
the card above left 


> Or call the hotline on - 


01458 271 108 
Please quote order code: SPCLPO3 


> Overseas readers call: 


+44 1458 271 108 


> Or send a fax to: 


01225 822 523 


> Or via the Web at: 
www.computerarts.co.uk 
> Or via e-mail to: 


subs@futurenet.co.uk 


Specials 


Computer Arts Specials are not 
included in the standard 
Computer Arts subscription rate. 
See page 21 for details on 
Specials subscriptions 


Get @ 
Kee 
binder! 


...you’ll also 

get another 
FREE gift — 

an exclusive 
Computer Arts 
binder — worth 
£6 — when you 
subscribe by 
Direct Debit. 
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On-line video 


PUTTING MULTIMEDIA ON THE WEB IS ONE OF THE FASTEST-GROWING 
AREAS OF INTERNET DESIGN — HERE’S HOW TO SQUEEZE VIDEO ON-LINE... 


he most disappointing aspect 
of the Web for first time users 
is that it's far more static than 
the hype would lead you to 
believe. The Web isn't meant to carry 
video, sound or much else in the way 
of ‘true’ multimedia. With optimistic 
download speeds between 2-6k per 
second, it can only just about handle 
text and graphics. But people do put 
video on the Web, aided by an entire 


t 


industry that has tried and only 
partially succeeded so far to get 
around the bandwidth bottleneck. 
Before you start thinking about 
digitising your home videos and 
bunging them on to your home page, 
make sure that this is what you really 
want. Whatever method you end up 
using, the results will be slow and 
fiddly compared to delivering text and 
graphics — so it’s important to be sure 


that video on your site enhances the 
experience for users, rather than have 
them clicking on the next link. Don’t 
just have it for the sake of it. 

With that warning out of the way, 
we can kick off our three-part Web 
series by taking a look at the file 
formats, compression tips and 
delivery methods that will ensure your 
transition from Web designer to media 
mogul is as smooth and painless as it 
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Capturing video 
Here’s what you need to know... 


going to have to get your hands on 


{ F| orget about those dinky Webcams 
that plug into the printer port — 


to deliver real video content you need 
some serious kit. If you've already got 
access to a video camera, you're half 
way there. 
If not, 
you're 


RealVideo encoding 


Real Networks latest G2 standard claims to offer the best balance between speed and quality in media streaming on the 
Internet. You can download the RealProducer G2 conversion kit for free at w www.real.com/products/tools 


i 
} 
| 
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Co. On launch, RealProducer starts 
with a screen that enables you to 
define input and output file names. 
You're able to convert video files from 
AVI and QuickTime formats. In the Input 
section, check the File Radio button and 
browse for your video clip on your hard 
drive. In the Output section check 
‘Realmedia File’ and type in the name 
you want for your new file, ending in a 
‘*.rm’ extension. 
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2 In the main screen, type ina 
title for the clip, then select two 
streaming speeds from the check boxes 
- 28k and 56k are the most sensible 
options. The audio and video qualities 
you choose depend on the content of 
the clip - while audio choices are self- 
explanatory, choose Normal for most 
clips, Smooth for clips with little action 
and Sharp for more kinetic clips. 


one. The most important part of the 
equipment will be a video capture card 
—with one of these in your machine 
you'll be able to capture video from a 
VCR or directly from a camcorder. For 
PCs, this means an ISA or PCI card that 
converts analogue video to a digital 
format — usually Microsoft’s AVI. 

Mac users need a similar board, 
but you'll have the option of capturing 
directly to QuickTime. For value and 

quality, Creative Labs ‘Video 
™ Blaster’ series is best. 
Wwwww.cle.creaficom/products/ 
video/videomenu.html 
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Before starting the conversion 

process, make sure that ‘Single 
Rate’ is checked in the main window. The 
second option ‘SureStream’ is new in G2, 
but is only compatible with Realmedia 
servers - ‘Single Rate’ enables you to 
embed the file in any Web page. To begin 
the conversion, click on Start in the 
Recording Controls section, and sit back 
while your clip is processed. 


“[t’s important to be sure that video on your site enhances the 
experience for users, rather than have them clicking on the next link...” 


can possibly be. Ready to dive in? Then 
let’s do it... 


Shoehorn it in | 


Assuming that you already have the 
video clip you need in a digitised 
form, the next stage is to manually 
compress the file further. Although 
all video codecs include some kind 
of compression algorithm, remember 


that the Web can’t cope with much 
data — so you need to give your file all 
the help it can get. 

The software that came with your 
capture card may be able to help, 
though we recommend a package like 
Adobe After Effects or DeBabelizer (the 
demo of the latter is included on this 
issue’s CD). Remembering that 
putting video on the Web is always 
a compromise between speed and 


quality, either of these packages will 
help you to strip out extraneous 
information from your file. 


Look at it go 


Standard VHS video runs at 30 frames- 


per-second — you can probably get 
away with less on the Web by either 
sampling the original analogue source 
at a lower frame rate initially, or using 


errr) 


oO Finally, click ‘Create Web Page’ 
- a wizard takes you through the 
process of embedding the RealVideo file 
into a blank page. At this stage you have 
the options of defining whether the clip 
plays automatically or in response to 
user input, and whether you want the 
clip to spawn in the external player or 
playback ‘in-line’. At the end of the 
process, you'll have the chance to 
preview your clip in a browser. 
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Streaming 

The TPC/IP protocol used by the 
Internet delivers data in ‘packets’; 
small chunks of information. 
Streaming media takes advantage 
of this by buffering the first 
packets to arrive in local memory, 
then playing them back while the 
data continues to arrive. The 
advantage is that you don’t have 
to wait for the entire download 
before seeing a result. 


Codec 

This is the name for encoding 
standards in multimedia. A single 
file format may support multiple 
codecs which can be installed 
plug-in style on a users system. 
It's in this manner that QuickTime 
video files, for example, are able 
to support streaming. 


Capture 

The process of converting an 
analogue signal to a digital signal 
through a DAC (digital to analogue 
conversion) device -such asa 
video capture board installed in 

a computer. 


In-line Media 
Media in the body of a Web page 
rather than in an external viewer. 


ActiveMovie 

Microsoft’s now defunct Activex 
video objects that enabled the 
embedding of digital video in-line 
in Web pages — now incorporated 
into the Windows Media Player. 
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Top video tips 


Follow these and avoid some agony... 


WE all make mistakes when trying 
out something new. With 


digitised video, you're dealing with a 
more complex medium than is usual 
in Web design — so it has to be treated 
differently to other media in some key 
ways. Follow our top six tips to avoid 
common pitfalls. 


Choose clips with ‘obvious’ 

movement. Most compression 
formats lose alternate frames and can 
result in distorted images. Subtle 
movement —a medium close-up ona 
talking head —can be lost or end up 
looking jerky. Good candidates to use 
as digitised movies include action 
shots, 3D animation and clips with 
multiple jump cuts. 


As in allinstances where you're 
converting from analogue to 


digital information, make sure the 
source material is of good quality. No 
matter how much you mess around in 
Photoshop or DeBabelizer, you won't 
turn a poor image into a good one. 


[3] Digitise to a RAW format from 
your analogue source for the best 
results. You can then choose the best 
compression method to use and make 
the appropriate alterations. This takes 
up more hard disk space — but like 
scanning at higher resolutions, you'll 
have more to work with. 


(4) If you can, provide more than one 
version of the digitised clip on 


your Website to hedge off problems to 
do with incompatible browser and 
plug-in combinations. Providing video 
in RealVideo G2 and QuickTime 2 
formats should be enough to make 


sure that just about anyone can see 
your video work. 


oO Don’t embed video in the 
introductory pages in your site — 
place them in a sub-page and warn the 
user that plug-ins will be required to 
view the content early on. Include 
direct links to the plug-ins if you can. 
A good way to do it is to employ the 
same method you'd use for a gallery of 
large images. Set up a page with an 
index of the video clips on your site 
with a single frame thumbnail of each 
asa reference. 


oO Though it’s tempting, avoid using 
video clips as banners or headers 
in your pages. They might look 
impressive when running from your 
machine in the office, but the rest of 
the page will have arrived long before 
the video clip starts to play on the Net. 
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For a huge collection of tips, guides, 
FAQs and tutorials on desktop video, 
why not point your Web browser at 

WwW http://desktopvideo.miningco.com 


‘The Sync’ is also the home of the 
RealVideo ‘JenniSHOW’. If you know the 
existential horror that is the ‘JenniCAM’, 
then try to avoid this like the plague. 

Ww www.thesync.com/jennishow/ 


3D animator Greg Shaptor creates 
short sequences with 3D Studio MAX, 
then outputs them to QuickTime for 
distribution on the Web. You can see 
more at w www.vacantstare.com 


the job. In this case the big four are 
AVI, QuickTime, RealVideo and one 

of the many flavours of MPEG video 
compression currently available on the 
video format market. 


Options galore 


AVI (Audio Visual Interleave) is the 
most popular standard for video on the 
‘Wintel’ platform — though it features 


DeBabelizer to remove alternate 
frames. Like standard images on 

the Web, videos with a lower colour 
resolution will result in smaller file 
sizes — this is particularly important 

if you decide to deliver using a non- 
streaming format such as .AVI or older 
versions of QuickTime. 


palette to the entire file. 

Size matters too — though the 
actual frame size you settle on will be 
affected by the delivery format you 
choose at the next stage. 320x240 is 
the maximum size you should expect 
to be able to get away with. 


comparatively few compression 
options and no streaming features. 
Designed primarily for desktop video, 
links to AVI files will launch in the 
default Windows Media Player. Though 
it's possible to embed AVI files in-line, 
only users with either ActiveMovie or 
Media Player 2 will be able to view 


Again, DeBabelizer enables you to . these files directly in their browsers. 
lower the number of colours displayed Which format? Though AVIs offer the best quality, 
in a any single frame, and can even And so to the next conundrum. There they'll take the longest time to 
enable you to apply a global colour are a number of accepted formats for | download. Most video-capture and 


delivering video on the Web, each with 
their own limitations. Unlike still 
images, there are no in-line standards 
for video — so you're always at the 
mercy of the peculiarities of the users 
individual set-up, which means opting 
for the most popular formats — even 
though they may not be the best for 


editing software on the Windows 
platform can either create or save 
in this format. 

QuickTime video is part of Apple’s 
range of multimedia playback 
standards, and has managed to gain 
some ground on the Web with the free 
distribution of players for Mac and 


“MPEG is one of the best methods to deliver 
Web-based video. The encoding tools may 
be more difficult to use, but as it’s a public 
standard, they are at least free...” 
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Multimedia artist Aaron Ross uses AVI 
movies to demonstrate his work in 3D 
animation and video. For more, check 

out w www.dr-yo.com/multi.html 


Finished Movies: 


proteinlV 


Hi-tech and lo-fi meet at The UK-based 
ProteinTV network, broadcasting short 
films, 3D artwork and music promos 
24-hours-a-day. w www.proteinTV.com 


Ribblevision provides a forum for ‘experimental Internet films’ - which largely means 
computer-manipulated live action and animation. They're available in QuickTime and 
PC-friendly formats from w www.ribblevision.com 


Wintel. The latest version of Windows 
Media Player can also handle 
QuickTime video, though only up to 
version 2.12. QuickTime 3 video has 
built-in streaming capabilities — 
however the ‘free’ player has an 
annoying ‘nag’ screen, urging users 
to dish out for the commercial version. 
Unlike other encoding tools, to create 
QuickTime 3 video, you have to pay for 
the development kit. 

MPEG is currently one of the best 
methods to deliver Web-based video. 
The encoding tools may be more 


Going live! 


difficult to use, but as it’s a public 
standard, they’re free. 

The format is so robust and 
compact it’s beginning to find its way 
into all sorts of new consumer devices 
too, from digital video cameras to DVD 
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movies. For users to take advantage of 
full-screen MPEG playback, they’! need 
a dedicated board in their machine. 
However, for Web delivery you'll still 
find that smaller is better, and the 
most widely supported version around 
at the moment is MPEG 2. 

Finally, Real Networks has taken 
the lead in streaming compressed 
multimedia to on-line users with 
RealAudio and RealVideo. The quality 
in playback is noticeably worse than 
any other format. However, a clever 
combination of good marketing, free 
distribution of both players plus 
development tools and speed gains 
that no other format can touch has 
put the company and its products on 
top of the heap. Take a look at our 
walkthrough to see how you can 
convert your digital video to streaming 
RealVideo format. 


The future? 


While video delivery lags behind the 
rest of the Web now, this is mainly to 
do with bandwidth restrictions. The 
technology itself does the job and does 
it well. You can expect to see big 
changes in parallel with the rise of 
digital television over the next few 
years, and this may change the way 
you design for the Web radically. 

Check out the Real Media tutorials 
on page 58, and pop along to page 76 
where we'll be discussing how to get 
animation on the Web, using Flash, 
Director Shockwave and Java 
animation techniques. GE 


“While video delivery lags behind the 

rest of the Web now, this is mainly to do 

with bandwidth restrictions. The technology 
itself does the job and does it well...” 
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Net resources 


Here’s where to go for 
more on the Web... 


| y | PEG.org is the premium 
resource for free tools, 
whitepapers, tips, tricks and 
resources about creating and 
distributing MPEG video. Always 
up to the minute, the site includes 
information on MPEG 4 and MPEG 
7—the emerging standard for 
digital video. w www.mpeg.org 


Download the RealPlayer G2, 
RealProducer and see examples 
of RealVideo with streaming 
technology at w www.real.com 


You can download QuickTime 3.2 
for Windows 95/98 here-and 
you'll also find information on 
development tools and links 

to test videos at this site. 
wwww.apple.com/quicktime/ 


You can also download Microsoft 
Windows Media Player 2, which 
can play QuickTime 2.12, MPEG 2, 
AVI, and RealVideo 2 files from w 
www.microsoft.com/windows/me 
diaplayer/download/default.asp 


Media Player can play a range of 
file formats - download it now! 


Live video? That’s different again. Using streaming media technology, a dedicated server, lots of co-axial cable and a room 
full of people with their fingers crossed, it’s possible to broadcast direct to the Net. Here are five sites getting it right... 


Radio 
broadcasting 
has been going 
for a while on 
the Web - now 
you can watch 
live gigs using the RealPlayer 
plug-in. Though the current 
content is a tad dodgy (Vanilla 
Ice and Howard Jones being a 
couple of highlights), there’s an 
archive of previous concerts 
too. w www.liveconcerts.com 


~ 


NASA TV is one 
of the many Web 
TV stations at 
broadcast.com 
Available in 
= Windows Media 
Player and 
RealVideo format, you can tune 
in to preparations for the next 
space shuttle launch on April 
8th, as well as the five others 
scheduled for 1999. w www. 
broadcast.com/events/nasa/ 


| 


Not exactly live, film.com uses 
real G2 to give you access to 
current theatrical trailers, film 
reviews and Hollywood gossip. 
Worth checking out for the CGI 
in the new Stars Wars: Episode 1 
trailer alone. w www.film.com 


The result of 
Microsoft's 
anti-trust 
case could 
end up tipping 
the balance of 
power on the Web. Catch up on 
what’s been going on so far, 
including Bill Gates video 
testimony at Real Networks 
dedicated site. Zoom in to 
W www.real.com/realguide/ 
special/mstrial/index.html 


Real 
Networks 
direct access 
channels to 
‘science and 
technology’ 
has a distinct 
bias towards computing issues. 
Watch ZDTV live, subscribe to 
TechWEB and pick up Web 
design tips in sound and vision. 
All this from w www.real.com/ 
realguide/scitech/index.html 
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The new beetle will arrive 
-rmiseceree end of 1999 
‘Come back in the «2 a. 
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(above) Deepend’s New Beetle site includes 


work from Design Director David ‘Gravy’ 
Streek, Multimedia Developer Pete Everett 
and Web Developer Gabrie! Bucknall. 
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From a start-up trio to the UK’s 
second largest independent digital 
media agency: “Vision, passion, 
enthusiasm and an insatiable 

appetite for fun” 


The Hoover site includes work from 
Streek and Bucknall, plus Flash 
designs from Fred Flade. 


ision, passion, enthusiasm and an insatiable 
appetite for fun have taken Deepend from three 
founding partners to a thriving company of 60 people 
in London's Shoreditch.” says Deepend's co-founder 
and Group Chief Executive, Gary Lockton. 

In just four years Deepend has reached the enviable 
position of being ranked as the second largest independent 
digital media agency in the UK (Design Week Survey) and 
awarded the D&AD’s Silver Award accolade for Interactive 
Media. This is a constant thrill for Lockton, as it is to his co- 
founding pal and Creative Director, Simon Waterfall, to Design 
Director David ‘Gravy’ Streek (who was original partner to 
Lockton and Waterfall) — and to the army of talent that has 
subsequently swelled their ranks. 

But this growth is not just a happy accident — it’s the result 
of some heavyweight objectives... “Our intention is to become 
the experts in total communication.” explains Lockton. “As the 
barriers dissolve between existing forms of media, Deepend will 
be leading the race with the vision, creative power and technological 
expertise to ensure that digital media works for everyone.” 

“The Deepend philosophy and culture allows true creativity 
to flourish,” says London MD Peter Beech. “People are 
encouraged to try new things, create their own development 
path, take risks without fear of incrimination. The cultural ‘glue’ 
is very strong and we intend to keep true to the spirit that 
produces that culture.” 

“Deepend is multi-faceted. We don’t rely on one business 
stream.” says Lockton. The firm now works in the web, 
multimedia, 3D, pure graphics, original music, digital video, 


Hoover Website 


> Client: Ogilvy & Mather/Hoover 
> Launched: 12-4-99 
> URL: www.hoover.co.uk 


Created to showcase Hoover's latest engineering 
triumph, the Triple Vortex System, the site 
provides a thoroughly pleasurable browsing 
experience that strikes the perfect balance 
between eye candy, useful product information 
and intriguing trivia. Essential product 
information is delivered through a highly 
intuitive interface designed to encourage 
exploration about how to deal with ‘the land 
beneath your feet’, 

Strong yet elegant geometric elements and 
circular motion animations reflect the principle 
of circular movement as championed by this 
revolutionary vacuum cleaner. Technical drawings 
and x-ray images of the new product reflect and 
reinforce Hoover's commitment to high levels of 
product engineering and add a sophisticated 

. high-tech feel to this refreshingly stylish and 
intuitive environment. 


broadcast graphics and interactiveTV. That's a pretty potent 
brew of creative outpouring. 

Deepend has a valuable position in the UK market — with 
the real, rather than illusionary, ability to marry interactive and 
broadcast skills in the ‘convergent media’ area. With a large 
slice of media and entertainments clients, it’s now working on 
channel partner relationships with emergent platforms as well 
as interactive advertising relationships. 

“The challenge our designers are facing at the moment is 
dealing with the varied range of content delivery technologies. 
WebTV is developing rapidly, along with the skills required for 


designing TV based interfaces.” reveals Lockton. “At the other 
end of the scale is the growing use of PDA’s and mobile phones 
for e-mail and Web access. How people will access and view the 
Web is exciting but underlying this is the speed with which they 


will be able to achieve this. Also, midband and broadband 


access is increasing, which therefore means the constraints of 
design and content delivery are being minimised and the look of 


the Web is dramatically altering.” 


And the result of this “vision, passion and enthusiasm”? A 
second-to-none client-list that goes a little like this: BT, VW UK, 
FT, Hoover, Anderson Consulting, Britvic, BBC, Coopers & Lybrand, 
Budweiser, Jaguar, D&AD, Microsoft, Halfords, The Royal Court 


Theatre, British Council, Rapido TV, Hewlett Packard, Cartoon 


Network, Barclays Capital, Nissan, Fujifilm, Royal & Sun Alliance, 


Renault UK, Kellogg’s, Reuters and KP. EI 


Deepend can be contacted on t 0171 247 2999 - or dive into the Deepend 
Website at W www.deepend.co.uk 


Cartoon Network 


> Client: Turner 
> Launched: 31-3-99 
> URL: www.cartoon-network.co.uk 
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Designed to support, promote and extend 
Cartoon Network's television programming, this 
UK flagship establishes the online offering as an 
entertainment medium in its own right. With a 
highly interactive interface with rich graphics, 
madcap animations and fun games with ‘toon’ 
sound effects, all based on CNT's cartoon 


characters, the site stimulates its target audience, 


children ages 4 to), visually, audibly and 


interactively. A constant stream of original games, 


Flash movies and new web pages tie-in perfectly 
with on-air and print campaigns with the 

purpose of drawing fans in and drive traffic back 
and forth between the on-air and on-line media. 


< | DEXTER'S 
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New Beetle Website 


> Client: Carat Interactive/ VW UK 
> Launched: 19-10-98 
> URL: www.newbeetle.co.uk 


Created with the objective of building 
anticipation around the new Beetle leading up 
to the launch in November 'g9, the Website 
promotes the car as the ultimate lifestyle 
statement for the wired generation. Designed to 
reflect and affirm the cultural values of this very 
sophisticated group with their high expectations 
of innovation and quality, it courts controversy by 
rejecting nostalgic content in favour of amodern 
“Alien Arrival’ metaphor. Cutting edge design 
based on elegant curves and seamless interaction 
with innovative functionality, conveys the 
message that the new Beetle is the car for the 
digital generation to be passionate about. 


The Cartoon Network project includes creative credits for Flash 
producer Mark ‘Sparky’ Wallis, Web Developer Guillaume Buat- 
Menard and Interactive Applications Developer Pete Everett. > 
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Hoover site’s dust and dirt 


For the wwww.hoover.co.uk site, Deepend needed to take consumers on a journey into the ‘land beneath our feet’, showing the 
natural and man-made things that exist there to make up dust and dirt. For various reasons the team were unable to secure 
stock imagery from electron microscopes of these objects and therefore had to recreate them from scratch. Electron micrographs 
have avery distinctive look which resembles a combination of uplit, inverted and colourised photographs. Here’s how... 


oS. Having initially sketched out the ideas, the CS. Using the spore alpha, the shapes were then 
individual elements for the composition were So. These were then copy and pasted as alpha filled with black, and with the Transparency 
c 


created in IIlustrator. hannels in Photoshop. selection still on... 


Co. Next came the carpet fibre itself. Again, the 
alpha was loaded in and the shape filled with Co. Using a larger airbrush this time, the form of 
t 


CSC. ...the shapes were outlined and shaded with a 
d he fibre was shaded in. 


jelicate airbrush to give them form. black to give a solid background shape. 


08 Gl 
Amount: 


O wnitorm 
® Gaussian 


BH Monochromatic 


With the fibre’s transparency still selected, the Co. The next step was to then take a small airbrush 
t 


fibre was given texture through several stages of ool and shade in ‘dents’ between the spores and The final step was then to colourise the images 
adding small amounts of noise and adjusting the levels _ the fibre layers. This gives the spores the grounding with hue and saturation before importing them 
to provide contrast. they need to finish the composition. into Flash for use in the final Website. EIS) 
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Over 5 million already unavailable! 


= | / , Register your Domain Name on-line TODAY 
ly, Our Service Includes: 


Online Name Check & Registration 
/ Free Email Forwarding 
Free Web Page Forwarding 


”) 1 
Two Years Registry Fees Paid 
Ss .com/ .co.uk/ .net/ .uk.com 
Visit our Web-Site for more info. 
SB) 


www.SimMplynames.co.UK or tevfax 07000 467 368 
the right name means simple navigation to your site 


Give The Dog A Ring 
0870 7878533 


www.situs.uk.com 
www.footsteps.uk.com 


frontier technologies lItd 


Domain Name Registration 
Directory Advertising 
E-mail Addresses 
V.LS.P Services 
Web Site Hosting 


Addresses & 10MB Web Space 
£12.00 P.M or £120.00 PA 
Web Space PA 

5MB £59.50. 10MB £99.00. 
ag 15MB £159.50. 20MB £199.50. 
The above includes a Follow Me number, 


DOMAIN MAME NOstting 
with J @@ Iva B sree 


eee 


Web Email Account 


what else POP3 Email Account - Unlimited Alias 
Mail Forwarding 
do I get? Account Setup 


Bandwidth - 155Mbs Connection 
SDaG@.co.uk 
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Get animated 


YOUR VIEWERS DEMAND n the cut and thrust of Web 
technology, the standard for 
MOVEMENT, ACTION AND animation is the most fervently 


: | : pursued. Although Shockwave 
INTERACTION. IT S YOUR | Flash is the industry's favourite, a 


JOB TO GIVE IT TO THEM, clear winner is yet to emerge. 


Animated GIFs are the most used of all 
AND OUR JOB TO PUT YOU the animation formats — accounting for 
| the majority of the advertising banners 
IN THE PICTURE... you come across in a surfing session. 
There are also other less visible 
methods. Most of the animated 
buttons you encounter use a JavaScript 
trick known as ‘image stacking’ or, less 
frequently, will be driven by fully-fledged 
Java applets. Dynamic HTML can be 
used for moving objects along paths, 
frequently deployed in the creation of 
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Animated GIF tips 


You. can create super-small GIF animations by following our walkthrough — and here are 
five tips on making the most of that bandwidth... 


@ Don't be too subtle about the 


changes in your animation. 
Obvious changes are a bonus on the 


Web, where you can’t reliably control the 
speed at which your animation will play 


back in a browser. 


Make the changes apply to a small 
area of the image only — tools such 


as G/FBuilder automatically animate just 


those sections, leaving the rest of the 
image as background, and creating a 
smaller file size. 


(3) There’s nothing more distracting 
than an icon blinking away in the 


corner of a page as the status page 
continually refreshes. Make it loop three 
times only: once as it downloads, once as 
the user sees it, and once for luck. 


Software resources 


There are always plenty of freebies around for producing Web graphics — some are worth 
alook, while others aren’t worth the download. We found the best on the Web... 


Microsoft’s GIF Animator is a couple of 


years old now, but it’s robust and - more 


importantly - it’s free. Grab it direct 


from the Web at w http://mssjus3.www. 


conxion.com/msdownload/gifanimator 
/éifsetup.exe 


pop-out menus. There are even some 
other proprietary formats trying to rival 
Shockwave Flash. Sorting out the right 
method for the job can be a nightmare 
— so we've taken a look at the most 
popular ways to put things that move 
on the Web, outlining the pros and 
cons of each. 


Animated GIFs 


Compuserve built animation 
capabilities into its GIF image file 


| Loop 
| CONTROL 
| |IMAGE 48 x 48, 16 colours 
| |CONTROL 
IMAGE 48 x 48, 16 colours 
CONTROL 


| IMAGE 48 x 48, 16 colours 
CONTROL 


IMAGE 46 x 46, 16 colours 
CONTROL 
| IMAGE 48 x 48, 16 colours 
CONTROL 
| |IMAGE 48 x 48, 16 colours 
CONTROL 


GIF Construction Set Classic should be 
your choice if you want more control 
over your files — it’s a comprehensive 
script authoring tool. Register the 
shareware version after 30 days. 
Download gifcon32.exe at f ftp://ftp. 
mindworkshop.com/pub/alchemy/ 


format (revision 89a) without making 
too much of a song and dance about it. 
The format supports multiple stacked 
images in a single file, automatic 
playback, external control, forward and 
reverse looping and single palette 
indexing. It is also far more 
sophisticated than it appears at first 
glance. Netscape started its support 
of animated GIFs back in 1995 in an 
early beta of Navigator 2, and the 

first ever animation created in the 
format appeared on the Web in 
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Qaergon buster/ 


Java 
Powerful cross-platform 
programming language. 


JavaScript 
C4) Use animated GIFs in JavaScript Object-oriented Web scripting 
rollovers to build complex buttons. language. 
Choose a static image as the Default 
button and insert animated GIFs for the DHTML 


mouseover and mousedown states. Dynamic HTML. Combination of 


Cascading Style Sheets and 
JavaScript which enables ‘objects’ 


oe If you're using an animated GIF 
ina page to respond interactively. 


as a banner, put any important 
information on both the first and last 
frames —it guarantees that people see it. Tweening 
Animation method where the 
intermediate stages between the 
start and end frames of a sequence 
are calculated in software. 


& File Edit Options Effects Animation Window 
a 


Loop : forever 


Delay Transp. 


Mac users have less choice on the 
shareware front, though GiFBuilder is 
more than enough to be getting on with. 
As a freeware application, the range of 
features - including import from 
QuickTime and aggressive compression 
routines - is impressive. Find it at 

W www.pascal.com/mirrors/gifbuilder 


“The techniques involved in creating and 
placing animation on the Web are easy to use, 
as long as you follow the golden rule and 
conserve as much space as possible” 


December of that year. 

Today, you can’t move on the Web 
without bumping into animated GIFs. 
They are found in advertising banners, 
page logos, buttons, headings — in 
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Flash animation 


With the small file sizes Flash generates, it’s ideal for creating animated interfaces. Our walkthrough shows you how to 
combine animation with interactivity to create a drop-down menu with a difference... 


o. Clicking on a single button in our menu 
launches the animation, unfolding a navigation 
bar. Start by creating a button graphic in frame 1 of 
layer 1, then select and group the entire image and 


choose Insert>Symbol. right of the work area. 


Co. Insert a new layer in the timeline and place 
keyframes at frame 1 and frame 10. Draw a ‘rod’ 
using the Rectangular Drawing tool, filling it with a 
linear gradient. Create a symbol from the rod by going 
to Insert>Symbol and checking Graphic. Select frame 
10 and position the rod as shown above. 


fact, anywhere you can put an image, 
you can put a GIF animation. 


Pros and cons 


A few aspects of the format are 
immediately appealing. To begin with, 
almost every version of every browser 
on the market supports it without the 
need for plug-ins. This is a big bonus in 
a world where conflicting formats and 
differences between browsers are 
carving up the Web into a series of 
no-go zones. Unlike other formats 
(such as Shockwave), you don’t need 
expensive tools to create them — there 
are perfectly adequate freebies that 
will do the job. And you don’t need to 


Choose ‘Button’ as the symbol type, then click 
Edit and add keyframes in the timeline for each 
button state, editing the button with each change. To 
finish editing the symbol, click the Arrow tab at the top 


Next, select the first keyframe in layer 2, and 
then select Properties>Tweening. Now choose 
Motion from the drop-down menu and ensure that Scale 
is checked. Now re-scale the rod symbol so it’s hidden 
behind the button on layer 1. 


6. Click on the button to select it, then choose 
Modify>Instance from the main menu. Under 
Actions select ‘Go To’, and choose ‘Frame 2’. Exit the 
dialog, then select the keyframe in layer 1. Choose 


‘Modify Frame’ and select Stop under Actions. 


o. Place a Stop action at frame 10 in layer 1, then 
use Control>Test Movie to try out the animation. 
This way, you can build up a series of animated events 
triggered by user actions - including sending calls to a 


Web server to load in new HTML pages. 


be a rocket scientist to make them 
either — the animation concept, a 
series of frames played back 
‘flickbook’ style, is easy to grasp. 

Problems are usually due to 
inappropriate use of the format rather 
than from the tools the animated GIFs 
are created with. Like all Web graphics, 
animated GIFs require a high level of 
attention to optimisation to combat the 
bandwidth bottleneck. While the size of 
animated GIF files may seem large 
compared to the results that can now 
be achieved with Shockwave Flash, 
there are steps you can take to ensure 
they're as lightweight as possible. See 
the walkthrough on making animated 
GIFs (p79) for more. 


“Shockwave has gone from strength to 
strength — and it’s also been bolstered by 
the introduction of Shockwave Flash...” 
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Shockwave 


The first version of Shockwave was 
already beginning to make an impact 
when animated GIFs were ‘discovered’. 
Unfortunately, it was the wrong kind of 
impact. At the time, the format was 
just one of many other attempts to 
bring multimedia to the Web — and was 
as slow, cumbersome and crash prone 
as all the rest. 

Macromedia learnt by listening to 
users and trying to implement the 
changes they demanded. Four years 
on and Shockwave is leaner, faster 
and more stable. Most importantly, 
it's a standard that people actually 
use. While many of its contemporaries 
have disappeared into obscurity (do 
you remember Sizzler or Hotwire?), 
Shockwave has gone from strength to 
strength. It’s also been bolstered by 
the introduction of Shockwave Flash, 

a format so fast and flexible that it’s 


Royale Frazier was the first person to 
use animated GIFs on the Web. Now he 
hosts the first Internet Gallery of GIF 
Animation - a site for tutorials and 
animated clip-art at w http://members. 
aol.com/royalef1/galfoyer.htm 


Don’t have satellite? Then check out the 
latest episodes of South Parkin Flash 
format at w www.comedycentral.com/ 
southpark/ 


Macromedia’s own Shockwave site is a 
fine example to aspire to. Shockrave at 
Ww www.shockrave.com is worth a visit. 


3D animation 


Maras 


Some designers can find tasteful 
ways to use 3D text in their Web 
pages - but not many. If you're 
one of them, there are loads of 
applications that enable you to 
create rotating logos quickly and 
easily. The pick of the bunch has 
to be Xara3D, from the folks who 
brought you the Xara 2 Web 
graphics package. Check out the 
15-day version of Xara3D on the 
CD - and you can get more info and 
downloads from Ww www.xara.com 


now possible to construct entire 
Websites using it. 

It’s safe to say that Flashis 
without a credible rival on the Web as 
an animation standard. Macromedia 
has recently submitted Shockwave 
Flash to the W3C (the World Wide Web 
Consortium) for consideration as the 
default vector format for the Web, while 
Netscape is promising built-in support 
for Flash in Navigator 5. Still, a couple 
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Making animated GIFs 


Fireworks 2 and ImageReady are ideal for constructing 
animated GIF files — but you can also build and optimise 
animated advertising banners using Photoshop, a 
freeware GIF building package and access to the Net... 


Co. Create a new image in 
Photoshop 75x75 pixels square. 
Fill in the background with a texture, 
then create a second layer, where you 
can create or paste a logo. Our simple 
example uses a single letter. Save the 
file in Photoshop format. 


Jexed Color 


Palette: | Previous | 
olor Depth Foter if 7 


To keep the file size down, all 
stages of our animation share the 
same palette. We achieved this by 
setting the Optimum Indexed palette 
for the first image in the sequence, 
then choosing ‘Use Previous’ for each 
of the subsequent stages. 


1, eRe 
AwayeonTop 
[Browser Palette 1_-J 

| Import Dither Method 


Petro Diftunon | 


CG. The animated GIF was then 
assembled in Microsoft's GIF 
Animator by importing each image one 
at a time. The animation optimisation 
we built in Photoshop is protected by 
choosing the ‘Optimum Palette’ setting. 


of niches may be left open for other 
proprietary formats to nudge in. 

At least that’s what Parable is 
hoping for with its ‘Thing’ format. 
‘Things’ are small, interactive bitmap 
animations that you can play back in 
any browser using a plug-in. 
Animations consist of a combination of 
movement along paths, plus frame- 
based changes that are triggered by 
mouse events. 


[ 2 Construct an animation by 
making incremental amendments 
to the image. In our example, the ‘logo’ 
in the second layer is rotated through 
360-degrees a little at a time. At each 
stage we saved a GIF version of the 
changes without saving the changes 
to the original Photoshop file. 


j bannerbackground.git @ 100% {Index} 


The rest of the 

banner, a 75x300 
pixel image, was also 
created in Photoshop 
and optimised using 
the same palette. 
This section of the 
finished image won’t 
be animating, so 
we can ‘slice’ the banner up and 
reassemble it in an HTML editor later. 


‘Savings in load time (28.8): 0.1 8 
Reduced mane 
Colors: 8 


Size: 6417 bytes 
Savings in bytes: 5.8% 


Co. To reduce the size of the 
animation still further, we then 


visited GiFcruncher at w www. 
gifcruncher.com - a free Web-based 
image optimisation service that 
reduced the size of our animation by a 
further 6%. The final banner was then 
assembled in Dreamweaver. 


The package used to create 
‘Things’ — the ThingMaker (no, we're 
serious) — is easy to use and 
inexpensive to buy; while a range of 
accessories, including a viewer, a 
converter that changes Director 
movies into ‘Things’ and a screensaver 
creation package are free. Though they 
seem to be catching on (with an 
increasing number of commercial sites 
offering downloadable ‘Things’), the 
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Japanese design company I2F uses Flash to produce some of the most innovative 
interface work we've seen on the Web. Check out w www.i2f.org 


Download ‘Things’ - which are compact 
interactive animated objects - from 

W www.thingworld.com. You can buy 
Parables’s ThingMaker here too. 


authoring program doesn’t seem able 
to do much more than a reasonably 
clued-up designer could manage with 
some animated GIFs and a smattering 
of JavaScript. 


Java, JavaScript and DHTML 


To include the powerful Java and 
JavaScript as animation formats 
seems like overkill — until you take a 
good long look at the Web. They are 
fully-fledged programming languages, 
but they're used more for producing 
simple animations than for any other 
purpose. The JavaScript ‘rollover’ — an 
image that swaps with another image 
in response to a mouse event — is now 
ubiquitous. Many drag-and-drop authoring 
programs enable you to create these 
animations without having to type the 


“It’s safe to say that Flash has no credible 
rival on the Web as an animation standard” 
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roject v.4.5 


Mano Design at w www.manoone.com 
hosts Flash tutorials and links to other 
Flash support sites on the Web. 


actual code — and if your favourite 
doesn’t, there are free packages that 
will do the job for you (see ‘Software 
Resources’, p77). 

But using Java just for animation is 
overkill — an object-oriented programming 
language as powerful as C++, and its 
main use seems to be to generate real- 
time reflections under logos and 
animated star-fields in ad banners! 
That's not really the problem, though; 
compared to other solutions, Java is 
slow and — ironically considering it’s an 
open standard — not compatible across 
browsers. The only recommendation 
for it above Shockwave is that there 
are many Java animation applets 
available for free on the Web. 


Animated antics 


Though there are other choices, a 
process of elimination coupled with the 
application of good old common sense 
reveals that there are really only three 


Banner and 
button makers 


Java seems to be a popular 
choice for many banner makers, 
even though there are easier and 
quicker alternatives. CoolBE is a 
cross-platform collection of Java 
applets for making animated 
banners, including examples and 
instructions on editing them for 
your own creations. Check out 
Ww www.CoolBE.com for more 
details and the download. 

The Banner Factory is a little 
more user-friendly, featuring a 
Java-based editing environment 
that you access through your 
Web browser. The banners you 
create can include scrolling text 
and background images and 
appear in 3D. As it’s a Java 
applet, it should work on any 
platform with a Java enabled 
Web browser too. Grab it from 
w http://silk.webware.co.nz/ 
Products/BannerFactory 


‘1 Cool Button Tool’ generates 
custom Java-based buttons with 
rollovers, sound and animation. 
The shareware version from 

W www.buttontool.com only 
works on Windows machines 
with Internet Explorer installed. 


good animation methods that should 
generally be used on the Web. 

For animated buttons go with 
JavaScript, using an authoring tool to 
take care of the coding for you. Logos 
and ad banners don’t really need Java 
when a simple animated GIF will do the 
job just as well — and Shockwave Flash 
can take care of everything else. The 
techniques involved in creating and 
placing animation on the Web are easy 
to follow as long as you follow the 
golden rule and conserve as much 
space as possible. EE 
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The definitive guide to Web design + Mac & PC 


Eismann and McClelland > 


his readable tome combines 
LT arunning discussion on 
& what makes good Web 
design with the nitty-gritty of 
theory and practice. Its tone 
treads a narrow line between 
friendliness and over-familiarity. 
It’s a comprehensive book for 
intermediate designers, covering Web 
graphics, site navigation, animation, 
and HTML; plus VRML and JavaScript, 
as well as how to manage your site 
and attract more visitors. 


studio secrets 


peke eke M micCletland.. an: 
etanen of 1087 Com atria, n Eismann, 
se asm en 


WEB DESIGN 


eiderst, spurred by her own 

A Desktg ; experience as a designer, has 

? QUiCh Reference CN written a great no-nonsense 
reference guide. As she puts it herself: 
“the useful parts without the fluff.” 
Just as your site should be, the 
book is easy to navigate. It offers an 
excellent index and intelligently 
organised sections and chapters. 
There's a useful glossary anda 
master list of HTML tags — including 
a list of those that are discouraged 
in the HTML 4.0 specification. 


O'REILLY* 


inda Weinman is a well- 
known Web design writer, 
(; L and the third edition 
of her popular designing web 
graphics is up to scratch. 
New topics include Fireworks, 
Dreamweaver and Photoshop 5 
tips, DHTML and working with clients. 
The book’s aimed at “all user 
levels”, and sure enough the Getting 
Started section has good basic 
information on kit, training and 
careers for budding Web designers. 


ISBN-it 


o get hold of any of these 

three titles, take a note of its 
ISBN number along to any good 
book shop, where you should be 
able to order yourself a copy. 


Weinman » New Riders > £50.99 > 


< further reading 


Books for reference and magazines to keep you up with the action... 


Web Design Studio Secrets 


IDG > £42.99 > 


ISBN 0764531719 


Studio Secrets uses real-life 
examples borrowed from designers, 
artists and companies, to illustrate 
the various design concepts. And each 
chapter is supported with examples 
ona CD-ROM tucked in the back, which 
also includes some sound files foryou | 
to hear artists talk about the topics at | 
hand in their own words. 


web special > 


Dig deeper and you'll find a mini- 
tutorial about animating with VRML, 
and some links to useful Websites 
for support. A few demos and freebies 
have been thrown in too, which goes 
some way to explaining the price tag. 

This is a book that inspires, 
explains, illustrates and then provides 
you with the means to do it yourself... 


“This book inspires, explains, illustrates and then 
provides you with the means to do it yourself...” 


Web Design in a Nutshell 


Jennifer Niederst » O’Reilly > £15.95 > ISBN 1565925157 


The book uses a turkey icon to 
highlight warnings, and an owl for 
notes. Otherwise, the black-and-white 
pics are sparing and diagrammatic. 
It’s not a gimmicky book, but saves its 
space for solid information. 

Nutshell covers HTML authoring, 
Web graphics and multimedia, plus 
introductions to Cascading Style 
Sheets, DHTML, XML and Embedded 
Font technology. The HTML section is 


typical of the volume: comprehensive 
and sensibly organised. The first 
chapter is an overview of the topic, 
followed by chapters on structural 
HTML, formatting text and creating 
links, frames and tips on helping 
search engines to locate your site. 
Although Web Design in a Nutshell 
is aimed at novice Web designers, it’s 
comprehensive enough to make an 
excellent reference for everyone. 


“A great reference guide without the fluff” 
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ISBN 1562059491 


That covered, it launches into 
detailed tutorials and explanations 
about preparing images — moving and 
static — for the Web. Weinman relates 
this to the design of asite in astyle 
that brings the topic to life. 

The 445-page volume covers all 
the key issues: planning your site, 
browser differences, file formats, 


colours, tables, frames, Cascading Style 
Sheets, GIF animation, and JavaScript. 
It also covers Flash, QuickTime 3.0 and 
Shockwave. The information is clearly 
sign-posted, so you can skip straight 
to the bits you want to read. You don’t 
get a CD thrown in for your £50, but 
you do get a glossy, colourful book by 

a leading writer in the field. 


“Weinman relates preparing images for the Web 
in a style that brings the topic to life” > 
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net 


“The Internet magazine” > £3.99 every month inc dual-format CD-ROM (or £2.99 without CD) 


or any professional or and you'll often get some complete | problem, the monthly Q&A section is 
OF aspiring Web designer, commercial Web design software too. just the ticket. But it’s not all work, 
t Computer Arts’ sister If you're a budding Webster, .net’s work, work: .net’s witty features reveal 
magazine .net is a superb guide Web Builder section is packed with the lighter side of the Internet too. 
to what's hot on the Web. With an tutorials to help you create better sites In short, .net delivers the tools and 
extensive news section and the with HTML, JavaScript and other Web information you need to do your job 
famous .net Top 100, it’s the most technologies, including Shockwave more effectively. No wonder it’s the 
respected yardstick for the most and Flash. Plus, if you've got a tough UK's best-selling Internet magazine. 
successful Websites. 
ee eee “In short, .net delivers the tools and information 
TW roar ae 5 it reviewed each month, software : a 
bisa meer trials are included on every CD, you need to do your job more effectively 


“Making the Internet work for you” > £2.99 every month inc dual-format CD-ROM 


very month, /nternet.Works the most comprehensive Internet to in this Computer Arts Special: which 

LE brings you over 100 pages of reviews section in the UK. All the new ISP do you choose? A good service 

S all the most up-to-date issues, Web tools — from digital cameras to provider can make all the difference 
products and techniques from the the very latest Web servers — get the between success and failure. In 
Internet business world. Features each Internet.Works treatment. Internet.Works’ |SP-testing section, 
issue cover all the issues involved It’s also the best resource for a you'll find over 50 of the best-known 
in Web design —from planning and hugely important topic that we've firms put to the test, to help make sure 
maintaining your site, to solving been unable to devote much space you pick the right one to host your site. 
problems and promoting it through 
advertising and search engines. “All the most up-to-date issues, products and 

More than 30 pages of new 
products each month make up techniques from the Internet business world...” 


Computer Publishing 


“The easy way to better DTP” > £5 inc dual-format CD-ROM 


his is a brand new adverts, newsletters or fanzines, you'll Websites — say, if you're making a 
CT magazine aimed at DTP find the tutorials brilliant too. football fanzine. The title covers all 
FREE! & and Web publishing Computer Publishing sees that, the software and techniques for the 
enthusiasts. If this sounds like while the methods are different, job, and keeps you up to date with the 
gitasaa | you, then Computer Publishing is design is as important in Web pages best ISPs and general Internet news. 
full of the stuff you want to know. as it is in printed documents. You may The first issue of Computer 
The magazine helps you produce both printed matter and Publishing is on the shelves now. 
to create publications and Web 
Pages faster, more easily, and more “A new magazine for DTP and Web publishing - it’s 
effectively. And whether it’s Web Pe is 
pages, magazines, brochures, leaflets, | for you if you design for print and for the Web” 


Computer Music 


“The complete music making guide for Mac and PC” > £5 inc dual-format CD-ROM 


he current issue of Computer Computer Music is Computer Arts’ the latest computer music products — 
_— T Music (July, issue 8) is an sister magazine, and it’s the best- including soundcards, speakers, 
a Internet music special with selling music technology magazine in keyboards, sound modules andsoon- ~ 
info on -line in-depth features on everything from the UK. Every month you get free music and answers the burning questions of 
promoting your music on-line to software, with tutorials on how to use the day. It breaks through the techno- 
TR get specific info on the jamming ‘live’ with other musicians it to make professional-sounding babble to make creating music with 
latest issues of all these wherever they are in the world. There’s music on your PC or Mac —all in jargon- your computer as easy, enjoyable and 
magazines, click your way to also an in-depth look at the current free steps. The magazine also tests all intuitive as it should be. EE 
Ww wwwfuturenet.co.uk. MP3 situation with a lively debate 
Mara Si 2 about the future of musicdistribution, | “The best music technology mag, it breaks through 
tom the drop-down menu. and how to get your music on the 
internet with your own Website. the techno-babble. Don’t miss the Internet special” 
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compute 
arts 


The definitive guide to Web design > Mac & PC 


T 


he best graphic optimisers, WYSIWYG designers & HTML editors 


cas03 


< buyer’s guide 2 web special > 


mMyearsguide 


These 19 packages have been selected as the first tools you should consider for Internet design. We’ve 
covered both professional and SOHO levels — and there are some bargains to be found, too... 


Graphics optimisation packages 


Fireworks 2 


PC & Mac 

£210, upgrade £116 
Computers Unlimited 

£ 0181 358 5857 

Ww www.macromedia.com 


Fireworks is well on the way to changing the 
way the world designs for the Web. It’s also 
said to give the best compression in the 
business - which is a good job, because you'll 
be tempted to design whole pages in this all-in 
Web graphics package. 

Version 2 sees real improvements to the 
optimisation facility. Access it via File Export, 
and you can perform a number of different 


tasks in one foul swoop, eg: compare different, 


check for Web-safety and optimise a batch of 


buttons. Fireworks will throw a few scripts into 
the bargain too, if you want, and integration 
with Dreamweaver 2 means you can use its 
compression engine from there, without 
opening the whole program. 


ImageReady 


PC & Mac 

£182 

Adobe 

t 0181 606 4000 

Ww www.adobe.co.uk 


Adobe's dedicated polisher for Web graphics 
looks and works just like Photoshop — a boon if 
you don’t want to mess around learning your 
stuff all over. But in design terms, it only does 
the basics, it’s a dedicated image tweaker and 


You can speed loading times up by using the same reduced palette for all your images. 
DeBabelizer has a facility for calculating your optimum palette across a batch of images. 


optimiser. So you can add text, layers and so on, 
but you’ll want to use Photoshop to get your 
look right first and import your .psd files in. 

As you’d expect, then, /mageReady’s 
optimising tools are top notch, and of course 
you can use it to work with animations too. All 
your fiddly settings and file info are at your 
fingertips, and you get a live optimised preview 
with options for Mac/PC gamma and 256- 
colour monitor simulation. But it there 
anything missing? Well, there’s image slicing 
and HTML on export for re-assembling, but no 
rollover scripting. 


DeBabelizer Pro 4.5 


PC (version 3 for Mac) 
£468 

Computers Unlimited 

t 0181 358 5857 

w www.equilibrium.com 


DeBabelizer calls itself an ‘Automated Graphics 
Processor’ — it majors in converting and 
optimising images and videos, and also does 
lots of things Photoshop and similar packages 
do, but not quite so well. So, like /mageReady, 
you're going to be using it as a companion 
package, not a standalone graphics tool. 

On the optimisation front, you can play 
with your dpi, colour res, and your colour 
palette in decent detail, and also script the job 
for batch processing. If you’re into video, you'll 
appreciate being able to import sequences, 
optimise frames and then export the whole 
shebang in the format of your choice. But if 
you’re happy to stick with animated GIFs, 
DeBabelizer seems a bit pricy at around £350 
more than /mageReady. 


Studio 2 Optimizer 


PC 

£60 

MediaGold 

t 0171 372 9733 

Ww www.hemera.com 


Photoshop lovers will feel at home with 
ImageReady’s familiar interface. 


In NetGraphics’ Optimizer use the slider 
to trade off file size against quality, and 
compare sample download times it 
calculates for you. 


NetGraphics’ Studio 2 is one-third graphics 
optimiser, one-third clip art collection and one- 
third cheesy ‘texture fonts’ package. But at £60 
and offering not-bad-at-all compression, it’s an 
option worth considering if you’re new to this 
game and also need some decent royalty-free 
images to play with (you get more than 2000). 
As the name suggest it’s a dedicated 
optimiser and does nothing else, so you'll need 
an image editor to make your buttons and other 
graphic elements first. But it’s simple, fully 
automated and has a great preview window 
and batch facility — so you can do a lot of jobs 
in one go. Still, if you don’t need the images, 
you could choose to shell out an extra £35 for 
ImageReady and get a copy of Paint Shop Pros. > 
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WYSIWYG page designers 


_ Dreamweaver 2 


PC & Mac > £351 
Computers Unlimited 
£0181 358 5857 

WwW www.macromedia.com 


Combining WYSIWYG capabilities with 
complete control over raw code, Macromedia’s 
Dreamweaver is probably the best all-round 
Web authoring tool available. 

Version 2 is more concerned with fine- 
tuning than overhauling the original but packs 
out the feature list with advanced one-click 
table editing, enhanced page layout control 
and superior site management tools. 

When you want to get your hands dirty on 
raw code you can switch to either one of the 
supplied and highly respected HTML editors: 
BBEdit 5.0 (Mac) and HomeSite 4.0 (PC). This 
package is recommended by almost all of the 
professional Web designers who come into 
contact with it. See walkthrough, p16. 


Adobe GoLive 4.0 


PC & Mac» £140 
Adobe 

t 0181 606 4000 
wW www.golive.com 


Adobe was so impressed with GoLive’s 
CyberStudio application it acquired the 
company. This is the first release under the 
Adobe umbrella and the major news is that a 
Windows version is imminent. This should 
ensure the program gives Dreamweavera 
serious run for its money. 

New features in GoLive 4.0 include an 
enhanced dynamic link manager and simple 
table-editing, and both of these sit alongside 
pixel-level page layout control, easy-to-use 
Dynamic HTML, cascading style sheets, 
QuickTime editing and ready-to-use JavaScript 
actions. More importantly, you can also expect 


The Ironbridge 
Gorge is credited 
with being the 
place where the 
industrial 
revolution started. 


tight integration with both Photoshop and 
Illustrator. More news on p64... win it on p65! 


Freeway 2.0 


Mac > £234 

SoftPress 

t 0800 731 3425 

w www.softpress.com 


You don’t have to be an expert in HTMLto 
create good-looking Web sites. If you’re at 
home in QuarkXPress and you’ve got a basic 
knowledge of graphic file formats then you've 
got the skills you'll need to produce designs for 
the Web in Freeway 2.0. 

It looks like XPress and it acts like XPress, 
with the ability to use Master Pages, and grids 
and guides to ensure your site maintains a 
consistent look. Features include support for 
CSS and HTML 4.0, and you can also edit and 
optimise images ready for export. The even 
better news is that the code it generates is nigh 
on faultless. 


NetObjects Fusion 4.0 


PC £234 

Twilight Zone 

t 01923 801 812 

Ww www.netobjects.com 


The first out of all the WYSIWYG Web authoring 
tools, Fusion’s strength lies in graphics, layout 
and site management. It provides you with 
pixel-level control over text and graphics and 
it comes with a set of 55 graphics styles for 
buttons, navigation bars, borders, and other 
visual elements. You can change the style of 
your Website quickly and easily and Fusion 
automatically updates the changes across the 
whole site. 

New features in version 4 include table- 
editing, Java-based drop-down navigation 
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If you’re looking to move from traditional publishing onto the Internet, Freeway 2.0 


makes the transition as painless as possible. 


menus and support for JavaScript. An excellent 
choice for designers that need heavy database 
connectivity. See walkthrough, p93. 


HoTMetaL Pro 5.0 


PC» £116 

SoftQuad 

t 0181 387 4110 

w www.softquad.co.uk 


HoTMetal Pro 5.0 provides three different 
editing environments. The first isa WYSIWYG 
mode with improved table editing and CSS 
display. Second is the HTML source view for 
complete control over your code. Finally, you 
get the more traditional HoTMetal visual ‘Tags 
On’ mode where you can view your layout and 
edit your code from the one interface. 


The integrated preview browser lets 
you check your work without switching 
applications and you can publish your site, 
or just changed pages, with a single click. 
Recommended for the Web-savvy, but 
newcomers should look for an easier opener. 
See walkthrough, p94 


Adobe PageMill 3.0 


PC & Mac > £93 
Adobe 

t 0181 606 4000 

Ww www.adobe.com 


Adobe's acquisition of GoLive! Systems doesn’t 
mean an end to its other visual Web authoring 
tool, PageMill. Where The new Adobe GoLive 4 
is aimed at professional designers, PageMill is 


Local Site Location 


Hard Date Dextop Fokier-The Flats 


The best all-round package on the market, Macromedia’s Dreamweaver 2 is backed up 


If you’re looking for an easy option, Adobe’s entry-level application, PageMill, takes 
with BBEdit and HomeSite HTML editors. 


care of all the hard work for you. 
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With WYSIWYG capabilities and simultaneous HTML editing, HoTMetaL Pro is an 
excellent all-rounder. The price tag is good too — but it’s for Windows only. 


aimed at the lower end of the market. And, if 
you're looking for a simple route to Website 
creation, it doesn’t get much better than this. 

You can design and edit pages in 
WYSIWYG mode and preview the whole site 
before exporting. You can also delve into the 
source code and edit HTMLin a separate 
window, keeping your pages alive in visual 
format. It ships with a copy of Photoshop LE, 
along with a collection of more than 10,000 
Web-ready images, animations, Java applets 
and customisable templates. 

The best way to get a taste for it is to 
check out the demo on the CD-ROM and follow 
the walkthrough on page 95. 


HotDog Express | 


PC» $49.95 
Sausage Software 
Buy on-line 

w www.sausage.com 


From the makers of HotDog Professional, one 
of the most robust and advanced HTML editors 
onthe market, comes this rather more intuitive 
drag-and-drop approach. You don’t need any 
knowledge of HTML and you never need to set 
eyes ona piece of code. All you have to do is 
drag ‘Web blocks’ onto your page to construct 
a page of headings, images, text, links and 
e-mail addresses. 


You can then preview your pages, change 
the style around until you’re happy and 
automatically upload the finished article to 
your ISP. It doesn’t provide the control that a lot 
of designers are looking for, but it’s quick and 
very easy to use. 


FrontPage 98 


PC & Mac > £116 
Microsoft 

t 0345 002000 

w www.microsoft.co.uk 


After feigning a corporate indifference towards 
the Internet in the early years, Bill Gates and 
the boys at Microsoft have made it their 
business to develop a stranglehold on the 
on-line community with its /nternet Explorer 
browser technology. 

This is its WYSIWYG Web authoring 
package and it’s aimed at beginners and 
adepts alike. We reckon it’s a decent editing 
platform if you haven’t got much experience 
of Web design, although it does get a bit 
complicated in places. 

The strength of FrontPage 98 lies in the 
advanced site management features, with link 
verification and find-and replace, as well as its 
support for JavaScript and CSS. It also ships 
with over 50 themes to give your Website a 
consistent visual feel. 
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FrontPage 98 is a solid Web authoring package but with FrontPage 2000 on its way it 
might be worth waiting, or checking out the trial version on the Microsoft Website. 


Splash! 1.2 


PC $49.95 

Beam International 
Buy on-line 

w www.gosplash.com 


With an interface that owes more than a 
passing nod to Kai Krause and the 
MetaCreations school of design, Splash! is 
perfect if you’ve had no prior experience of 
designing Websites — with a fairly gentle 
learning curve. Aside from working out how to 
navigate the software there’s not much else to 
learn. You can create a whole site by following 
a wizard, while Splash! generates all the HTML 
code behind closed doors. 

One excellent feature is the Java applet 
wizard, which creates image rollovers and 
tickers and banishes the need to mess around 
with applet parameters and class files. As with 
all programs of this ilk, Splash! is limiting and 
there’s no facility to edit the code directly. 


Drumbeat 2000 


PC $399 

Elemental Software 

t 001 760 9317171 

w www.drumbeat.com 


A WYSIWYG Website builder that excels at 


database integration. It’s extremely powerful 
and definitely not a package to consider if 
you’re new to the scene, but if you understand 
a little more than the basics then Drumbeat 
makes it easy to create highly individual Web 
sites from scratch. 

It provides easy access to all the major 
Web technologies including DHTML, JavaScript, 
VB Script, CSS positioning, and CSS styles, and 
it gives you design tools such as grids, guides 
and alignment tools that enable you to create 
pages without writing any code. Browser- 
sensitive SmartPages ensure that your finished 
site can be viewed by anyone, regardless of 
browser version. 


Web Express 3 


PC» £61 

The Thompson Partnership 
t 01889 564 601 

w www.ttp.co.uk 


Although Web designers might be affronted by 
the Web Express approach, there’s always a 
ready market for the one-click approach. There 
are wizards for just about every task, including 
the creation of an entire site from scratch. You 
also get hundreds of professionally designed 
Web site and page templates, cgi scripts, 
background textures, buttons, page dividers, 
sample style sheets and clip-art. 


An excellent heavyweight WYSIWYG 
package, Fusion 4.0 is strong on 
graphics and site management. 


Remember the building blocks you used 
to play with as a child? HotDog Express 
works on the same principal. 


If you need database integration on your 
Website, Drumbeat 2000 is the essential 
purchase. Not recommended for novices. 


No frills, but Web Express is shareware 
and it promises to get you up-and-running 
with a few clicks of your mouse. 
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HTML editors 


> HotDog Professional 5.5 


PC 

$129.95 

Sausage Software 
Buy on-line 

W www.sausage.com 


HotDog Professional is a serious package 
aimed at — yes — professional Webmasters. 
Built around one of the best HTML editing 
engines in existence, version 5.5 is meaner and 
leaner, and it promises to open documents 
three times quicker than version 4. Also 
featuring in version 5.5 are a new interface, 
customisable shortcut keys and a new range of 
SuperToolz plug-in components imported for 
added functionality. 

If you're looking for an affordable package 
that gives you complete control over your code 
then this standalone version is highly 
recommended, and with a little practice the 
friendly price point could soon be paid off with 
the pages you'll create. 

You can also buy it as part of the HotDog 
5.5 Webmaster Suite, which provides you with 
all the Internet and graphical tools you need to 
create your site from scratch. 


HomeSite 4.0 comes with Dreamweaver 2 
but you can also buy it as an affordable 
standalone editing solution. 


Allaire HomeSite 4.0 


PC 

£88 

Unipalm 

t 01638 569 600 
w www.allaire.com 


HomeSite is the award-winning HTML editing 
tool that’s considered good enough to be 
supplied with Dreamweaver. This should be 
recommendation enough. Unlike visual 
authoring tools, HomeSite gives you precise 
layout control, total design flexibility and full 
access to the latest Web technologies, such as 
DHTML, SMIL, CSS and JavaScript. 

Adding another acronym into the melting 
pot, HomeSite has a WYSIWYN interface that 
gives you the tools you need for the job in 
hand, without cluttering up your work space. 
Strong site management tools, including HTML 
validation, spell-checking and link verification, 
round off a highly affordable package. 


BBEdit 5.0 


Mac 

£86.50 

Full Moon Software 

t 01628 660242 

Ww www.barebones.com 


BBEdit is said to be the best HTML and text- 
editing tool for the Mac, a view which is shared 
by Macromedia who includes BBEdit as part of 
its Dreamweaver package. It’s designed for 
editing, searching and manipulating text and 
comes with key features such as multiple 
undoes, an integrated spell-checker and a 
multi-file search and replace. 

HTML specific features include context- 
sensitive tag completion tools, a table builder, 
Web-safe colours, scriptable HTML authoring 
preferences and a one-click preview. The HTML 
tools have been completely re-written for 
version 5 and it provides support for all the 
latest Web technologies. 


| TITLE>This is the Title</TITLE> 
OETA WAME="Cenerator” CONTENT="HTHLed Version 2.0"> 
| META WANE" Author” CONTENT={"Are Miller"> 


</HERD> 


<H>This is a heading for my sample document.</Hi> 
<a> 


This is 4 very simple HTHL document. 


- It shows how text can be emphasized using the 
_ <STRONG>strong</STRONG> and <Et>euphasis</t> HTML elements. 


Comprehensive it may be, but HTMLed Pro 3.0 doesn’t provide you with the power of 


some of the more flamboyant new packages. 
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<head> 


<title> Sausage Software - HotDog Professional 5</title> 


<link rel@STYLESHEET href=" graphics/styles. CSS" type="text/ess"> 


<head> 


<body alink="#F F990" bgcolor="#F FFFFF" text="4000033" 


Uink="#003399" vink="#000006 "> 


Leaner, meaner and raring to go. HotDog Professional - now updated to version 5.5 - is 
the tool of choice for Webmasters everywhere. 


HTMLed PRO 3.0 


PC 


$59.95 
BMT Micro 


t 001 910 791 7052 
w www.ist.ca 


In addition to the standard tools that you’d 
expect to find in any self-respecting HTML 
editor, HTMLed Pro provides an animated GIF 
editor, right-click context-sensitive tag editing, 
right mouse button functionality, spell 
checking and a real-time preview. There’s also a 
CSS Editor, a WYSIWYG table designer and 
support for HTML 3.2 and HTML 4.0 elements. 
We'd only recommend the package if 
you're a hardened HTML pro, although there is 
a Page Builder wizard which provides a quick 
and easy way to create HTML pages. It’s well- 
liked for its comprehensive editing features, 
but it doesn’t provide you with the power of 
some of the latest packages to hit the shelves. 


HTML Assistant Pro 97 


PC 

$89.95 

Brooklyn North 

t 001 1800 349 1422 

w www.brooknorth.com 


Raw HTML editors are not as user-friendly as 
their WYSIWYG counterparts, but this is one of 
the easiest to get to grips with. HTML Assistant 
Pro 97 comes with a massive amount of help. 
Extensive documentation and tutorials make it 
ideal if you’re considering dipping your toes 
into the waters of HTML coding. 

You can import documents straight from a 
word processor with the RTF-HTML conversion 
feature and you can check you can check your 
work in any Web browser and upload your work 
via the Site Assistant and Quick Publish 
features. With 255 levels of undo and redo, 
coloured tags, spell-checking and long file 
name support, it’s worth checking out. GEES 


Not all HTML editors are confusing for 
beginners. HTML Assistant Pro 97 comes 
with a load of help for the first-time user. 


The HTML editing tool of choice for Mac 
users. Like HomeSite on the PC, BBEdit 
ships with the full version of Dreamweaver. 


Monthly 
Buyer’s Guide 


You can get a monthly dose of the 


Computer Arts Buyer's Guide which 
covers the full gamut of design 
hardware and software. More 
details on page 66, or from 

W www.computerarts.co.uk 


TRAINING CD-ROMs 


www.vtco.com 


* expert trainers 

* cross platform 

* all you need on one cd 

* no application necessary 


eeeee Dealers - please telephone 01825 764057 eee 


 * LEARN 


PageMill 3forWindows sev 
Dreamweaver 2 ‘civ 
Flash3.0 new 

Golive Cyberstudio 3.0 
HTML 4 

ImageReady 

HTML 3 

Netscape Navigator 3 
PageMill 2 

FrontPage 98 

Photoshop 5 

Photoshop 4 

Photoshop 5 Techniques 
QuarkXPress 4 
QuarkXPress 3.3 
QuarkXPress 4 Techniques 


prices include VAT & delivery 


Premiere 5 

llustrator 8 

Desktop Design 

3D Studio Max 2.5 
Bryce3D sew 
Infini-D 4.5 

After Effects 3.1 
CorelDRAW! 8 
Scanning & PrePress 
Painter 5 

Freehand 8 
PageMaker 6.5 
Director 7 new 
Director 7 Lingo new 
Mac OS8.1 
ClarisWorks 5 
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Give uS a CALL and get 
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4] The preferred training 
provider for many of the 
UK’s leading design, 


internet publishing, print & 


multimedia companies 

{| Six months telephone or 
e-mail helpline support 

| Adobe, Quark and Claris 
authorised 

4] Training for designers by 
designers 


{| Courses on QuarkXPress, 


Photoshop, Director, 
Premier, Infini-D, After 
Effects, Dreamweaver, 
CyberStudio, Frontpage 


. 
= 
a 


a - 
: Ne 


iF e , 


media training 


0171359 9855 


enquiries@mediatraining.|td.uk 
http://www.mediatraining.Itd.uk 
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The UK’s best technology magazine... 


...now online 


www.t3.co.uk 
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The definitive guide to Web design > 


Mac & PC 


65 items of Internet-related jargon busted wide open on your behalf 


< stossary 


web special > 


THERE ARE A LOT OF TERMS BANDING ABOUT THE WORLD OF WEB DESIGN. USE THIS AS A REFERENCE FOR 
ANYTHING YOU DON’T UNDERSTAND, FROM THE MOST BASIC TO THE IMPOSSIBLY TECHNICAL... 


ActiveX 


Microsoft’s answer to Java, and a hub 

of controversy over security. ActiveX 
‘applets’ undermine what we expect from 
applets, because they can be written to 
do just about anything that takes a 
programmer's fancy. 


Animation 
Moving stuff. Put it on your pages with 
GIFs, DHTML or Shockwave. 


Applet 

A mini application, typically in Java, which 
is usually dedicated to doing just one 
specific job — such as putting a changing 
image on a page with a different link for 
each change. Formally, an applet should 
have no access to files on your system, 
to serial devices on your computer, or to 
other computers other than the server it 
was sent from. It’s a safer way to have a 
small program run on your computer. 
Compare with ‘script’. 


Audio 

Sound, in multimedia lingo. Used more 
specifically for file formats that code the 
waveform of sound or music, like WAV, 
AU and MP3 - think of it like a bitmap for 
sound. Much slower to download than 
MIDI, but you know that what you hear is 
exactly what your listener will hear. 


AVI 

Windows’ video file format. It’s fairly 
bulky, so not good on the Internet for 
anything longer than a few seconds. 
MPEG is a better option for lengthy stuff 
on the Internet. 


Bandwidth 


In short, how much ‘stuff’ (=code) can get 


Note: 


If a word’s underlined, it’s got its 
own entry in the glossary. 


down a line, how quickly. Usually quoted 
in bits per second, or bps. A 56k modem 
transfers data 56,000 bits per second (in 
theory at least). Download times are a 
bandwidth issue. 


Bookmark 

A link to a URL which you store in your 
browser or as a shortcut in a folder, for 
quick access to a Web page or file without 
having to tap in its URL, or go hunting for 
it on the Web. Bit like an entry in an 
address book, really. 


Browser 

A program you use to view Web pages or 
browse files — such as Internet Explorer 
and Netscape Navigator. Windows 
Explorer and Mac Finder are file 
browsers, and you can get similar-looking 
applications, like Terrapin FTP, for 
browsing ftp sites, where you see the 
actual files on a site, rather than open 
them. You need one for managing the 
files on your Website. 


Cascading Style Sheets 

Or CSS for short, it's a technology you 
can use so you don’t have to specify the 
exact format for every bit of text you have 
on a Web page. You just give the text a 
style name, say ‘heading’ or a ‘strap 
line’; and at the top of your HTML or ina 
separate file, you define the format for 
each style you've named. Makes life 
much easier if you later want to change 
the style of all your strap lines — just 
make the adjustment in your style sheet. 


CGI 


Common Gateway Interface. Think of it 
as a bunch of rules encapsulated in a 
program, usually with the idea of taking 
some data an doing something useful 
with it. Like taking info from a database, 
and presenting it in a Web page — a good 
way to save on design time if your pages 
have a set format. 


Compression —_ 


Shrinking file sizes so they download 
faster. Uncompressed graphics, which 


Browsers don’t always follow the same 
rules, and you have to write several 
versions of your code - such as this 
script from w www.head-space.com/303. 


define the colour of every pixel in an 
image, are pretty intensive and can take 
an age to download. So most graphics 
on the Internet are saved in either GIF or 
JPEG format, which have different ways 
of reducing the amount of code used to 
describe an image — inevitably, with some 
loss in image quality. You can compress 
audio and video too, with the MPEG 
format, for instance. 


Cookie 

A small nugget of info sent from a 
Website to your browser, the idea being 
you hold onto it, and send it back when 
you're connected up to the same site 
again. Handy for storing visitors’ log-in 
info or viewing preferences. 


Cross-browser compatibility 
HTML is meant to be a standard, so every 
application working with it goes by the 
same rules. But things haven't worked 
out like that, and different browsers 
display Web pages differently. It's a 
problem, mainly with more recent tags 
and technology — compare this to 
Cascading Style Sheets. 


DHTML peal eda Soe 
Dynamic HTML, or whizz-bang exciting 
stuff, for short. DHTML puts HTML to 
work with scripts to get some interactive 
action on your pages, like rollovers, 
sliding text, etc. The principle is that all 


Optimising your graphics is important to 
make sure they download quickly, but 
compression can make a right mess of 
them too. There are dedicated apps for 
the job, eg NetGraphics Optimizer, or you 
can pay a visit to Ww www.gifcruncher.com. 


the action is coded into the page — the 
page can change without the need for 
your visitor’s browser to download any 
new data. 


Domain 

A unique name for an Internet site 
location, rather than for a file on a site. In 
Ww www.computerarts.co.uk, the domain 
is ‘computerarts.co.uk’. If your was at w 
www.msn.com/homepages/mysite, your 
domain is — strictly speaking —‘msn.com’, 
and ‘homepages/mysite’ is a folder 
within that domain. 


Download 

When you copy a file via a cable from one 
computer to another. To view a Web page, 
you have to download the HTML and any 
other files it asks for — graphics, for 
instance — from a Web server. You can 
download any kind of file or program onto 
your computer, and use it like a normal 
file, just like copying something from a 
floppy disk. 


E-commerce 

Trade that’s undertaken electronically, 
such as via the Internet. There are some 
concerns over security, since you have 
to give credit card details. However, 
Websites are increasingly guaranteeing 
safe transactions, a good example is 

Ww www.amazon.com, who can also help 
you set up your own bookshop. 
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flabie for download, the ‘latest’ version and a ‘fallback’ for a time after uploading a nq 


jeld defaults can now be overridden. 


glossary > 


Downloads - you can get a lot of useful stuff off the Web for site design. Pay a visit to 
Wwww.freestuffcentre.com or other links from our CD interface. 


Dropdown lists make finding what you want easy, and you can make them using forms 
- like this one at Ww www.guardian.co.uk. You'll need a script to activate the links. 


Editor ye 


A program you can use to edit besde, like 

HTML or Java. You can use any text editor, 
say Notepad or Simple Text, to edit HTML; 
but dedicated editors are handy, because 
they colour-code and tab your HTML to 
help you recognise what the different bits 
are and what they do. WYSIWYG editors 
enables you to do the job visually, rather 
than get bogged down with code. 


Flash 

Macromedia’s multimedia graphics and 
animation package that’s fast becoming 
a standard for the Web. It’s an affordable 
piece of software — that you can try out for 
yourself on this issue’s CD. 


Form 


to transfer and manage the files you've 
got on your Website server just as if 
they're in a folder on your hard drive, by 
using an ftp browser. An ftp URL has ftp 
instead http at the front. 


GIF BHD 1 : 
Graphic Interchange Format. A file format 
for images, whose size depends partly 

on the number of colours involved. An 
excellent way of compressing graphics, 
such as logos and buttons, which use 
areas of solid colour, rather than 
gradients. GIFs can also have transparent 
areas — good for cut-out graphics — and 
are a good format for simple animations. 
Compare with ‘JPEG’. 


Gopher 


You can put forms on Web pages, which — 
— just like normal forms — visitors can fill 
in and send back with a ‘submit’ button 
at the bottom, which you set up to send 
their answers to your e-mail address, 

for instance. Electronic forms make 
transferring information into a database 
a straightforward job. 


Frame = 
Frames break your Web browser window _ 
into sub windows, which you can scroll 
and browse with independently. A fave for 
keeping navigation bars and headers still 
while visitors scroll through info in a main 
pane, you need a separate HTML file for 
each frame. You can program links to 
open a page in a different frame quite 
easily — but save the effort and use a 
WYSIWYG editor. 


ftp 

File Transfer Protocol, an alternative to 
http and Gopher. It’s a way of logging into 
a site on the Internet, and see the files 
and folders held there, rather than 
opening them. It's also the easiest way 
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An alternative to http andftpthatwas 


popular on the WWW before http made it 
big with hypertext. 


Guestbook 


Takes messages from visitors to your 
Website, and posts them on a Web page. 
It's a great way to get your visitors 
involved, get feedback, and really improve 
the content of your site. Guestbooks can 
be a great read — you can get one for free 
at w www.freeguestbooks.com 


Homepage 


The first page on a site that you come to, 
usually. It’s a starting point for visitors, 

a contents and cover page all-in-one, and 
a hub of links around a site. Every site 
should include a link back to the 
homepage on every page, and the file is 
usually called index.html. ‘Homepage’ is 
also used to mean the site your browser 
automatically opens to, or a private 
individual’s own Web page. 


HTML 


Hypertext Markup Language — the basic 


ftp is useful for transferring and 
managing files on another computer. The 
right pane shows NASA’s public ftp site, 
at ftp.jpl.nasa.gov, and the left pane is 


your hard drive, using the CuteFTP browser. 


language used to code Web pages. The 
idea is you put bits of code around your 
text to say how it should appear, and with 
what links and multimedia. A markup 
language literally 'marks up' information 
—in the case of the Web, mostly text and 
figures — to say a bit more about what it 
is, or what should be done with it. See 
hypertext and compare XML. 


http 


Hypertext Transfer Protocol — a way of 
moving hypertext and other files from one 
computer to another. What the Web uses, 
as opposed to ftp or Gopher. You should 
use http to open HTML pages, rather than 
see the files. 


Hypertext 


‘Living’ text, which you can click on to do 
something — such as link to another page 
or to a file for downloading. 


Imagemap 


Away for you to add a link to just part of 
an image, rather than the whole thing, so 
different parts of an image can link to 
different URLs. This means, for example, 
that you can compose your navigation bar 
as a single GIF, to save on filesize. 
Easiest is to do it with a Web design app. 
No good with rollovers, however — you'll 
have to check out slicing. 


index.html 


When you type in a domain name, the 
default file that opens is index.html, so 
it’s a good idea to call your homepage 
that — and not index.htm. If you don’t 
have an index.html, most browsers will 
automatically just bring up an index of all 


It's a real help to use dedicated HTML 
editor that colour codes and tabs your 
HTML - you’re much more likely to be 
able to work out which sections do what. 


the files under the domain you've given. 


Internet 

A group of computer networks connected 
together, which evolved from ARPANet of 
the late 60s and early 70s. Some say 
ARPANet was developed to keep 
communications going in the advent of 
nuclear war. Nevertheless, don't confuse 
your Internet with your World Wide Web. 


Intranet a 
An internal network between computers, 
independent of the Internet. Intranets can 
also be connected into other networks, 
like the Internet. 


Java 

Programming language devised to do 
anything you can normally do with a 
language, but in a virus-safe manner. 
So it’s popular on the Internet, and 
JavaScripts — see scripts and applets — 
can be used to do a lot of great stuff on 
Web pages that you can’t do with HTML. 


JPEG 

Joint Photographic Experts Group, which 
is fairly esoteric. JPEG also the name 
given to an image file format, ideal for 
compressing photos, but begins to look 

a bit raggy if you compress things too 
much. Better than GIF for images with lots 
of colours and graduations. 


Keywords 

Words you put in the head of your HTML 
so search engines can identify what your 
site is all about, and know when to 
suggest it in response to a Web search. 
The code is: <meta name="keywords" 
content="put your keywords in here, 
separated by commas"> 


Link 

What makes the Web go round: a 
connection attached to some text, a 
graphic or whatever, so that when you 
click it, you are taken to another page on 
the Web, to another place in the same 
page, or to a file which you can copy to 
your computer. It's actually much more 
important than it might sound! 


Metatag 

Tags which you put in the head of your 
HTML document to say something about 
it- like keywords and a description for 
search engines, or an instruction to a 
browser to automatically open a new page 
after a specified delay. 


MIDI 

Musical Instrument Digital Interface is a 
format for files to send instructions to a 
synth — such as the Wavetable on your 
soundcard — to play a certain sound in a 
certain way. It’s a very compact format, 
but what comes out at the other end all 
depends what’s going on inside your 
listener's computer. WAV and MPEG put 
you in control. 


Mirror site 

An exact copy of a Website, usually held 
on a different server to spread the load of 
traffic, and maybe in a different part of 


the world — the idea is usually to speed up 
access for distant visitors. 


MP3 

Member of the fantastic MPEG family, 
MP3 is a streaming audio file format that 
can squeeze as much as a minute of CD- 
quality audio into 1MB. For comparison, 
an audio CD can hold up to 74 minutes of 
music, while a CD-full of MP3s could hold 
ten hours of music. The best and fastest 
compression format out there. 


MPEG 

Moving Picture Experts Coding Group — an 
incredible compression format for video, 
with little or no loss in quality. DVD uses 
MPEG format, and it should revolutionise 
multimedia on the Web. The equally 
stunning MP3 is MPEG’s audio twin. 


Multimedia 


Ce oer reereare 


It’s a good idea to look at the source 
code for pages you like. Choose 
View>Source or the equivalent for your 
browser. This is the homepage at w 
www.newscientist.com. 


good Web design apps will do all the hard 
work for you. 


Script 


Streaming video is good fun, but it’s 
tough to get the balance between speed 
and quality right - at least, until 
everyone has 56k bandwidth or more. 
This is interface.pirate-radio.co.uk. 


RealVideo, MP3 and Shockwave are 
ideal for this. 


Table 


Text, graphics, sound, widgets that do 
stuff, you name it... 


Navigation bar ’ 
The key to good design, so visitors can 
find their way round your Web pages ok. 
However you choose to have it — across 
the top, down the side, bottom or broken 
up around the page - keep it clear, simple 
and direct. And keep it much the same on 
all your pages, for identity and clarity. 


QuickTime 
Favourite Mac video format. Like AVI, a bit 
download-heavy. But the QuickTime player 
is taking on MPEG support, which will be 


a boon for Mac users. 


RealAudio 

The godfather of audio streaming on 
the Internet. Almost everyone has the 
RealPlayer needed to hear it, so it’s a 
safe bet. But MP3 is hot on its heels. 


RealVideo 

RealAudio’s video sister and the 
Internet's favourite video streaming 
format. Like RealAudio, a safe bet, but 
MPEG is catching up fast. 


Rollover 

Graphic that changes as you move your 
mouse over it, click it and so on. A clear 
favourite for buttons. You make rollovers 
using an image for each mouse state, and 
a simple JavaScript — see ‘Script’. Lots of 


This page at w www.head-space.com/303 
is made almost entirely from a single 
GIF, sliced, linked and reassembled in a 
table. This gives you more control over 
your layout, but can slow up the 
download time. ~ 


A small program dedicated to doing a 
specific job — like detecting what kind of 
browser your Website’s visitor is using. 
This could be written in Java or Director 
Lingo, in which case it works in a browser, 
or in Perl or C++ as a CGI script, which 
works in the Web server, for example. 


Search Engine 

Sites like Yahoo and Altavista scan and _ 
catalogue pages on the WWW. You can 
then use their search engines by tapping 
in keywords, to find sites relating to what 
you're looking for — try w www.yahoo.com, 
or wwww.altavista.com. You can also 
include a search engine on your own site, 
to help visitors find exactly what they're 
looking for, quickly. 


Server 

Computer that you connect into to do 
something you can't or don’t want to do 
directly with yours. You use a Web server 
to see and store Web pages, a mail 
server to deal with e-mail, and so on. Web 
servers are connected to the Internet 24 
hours a day, and deal with a lot of traffic. 


Shockwave 

A format for streaming brilliant animated 
interactive content on the Internet. The 
technology was developed by Macromedia 
to get Director movies going on the Web, 
and ‘shocked’ sites are some of the best 
going — wwww.macromedia.com/shockzone 
is the best place to go for the cream of 
the crop. You'll need a plug-in to make it 
work, which you can download while your 
there. Compare with ‘Flash’. 


Slicing 

When you cut up an image so you can 
have different parts of it doing different 
things. For instance, so different parts 
can have independent rollovers. You can 
then get your HTML to reassemble the 
bits seamlessly in a browser — most 
easily done. by placing your slices with a 
table. Lots of good Web design apps will 
do all the work for you. 


Streaming 

When audio or video plays while it 
downloads, rather than you having to wait 
around for it to download first. RealAudio, 


Used to organise information on a Web 
page. Invisible tables (that is, with a 
border size of 0) are used a lot by 
designers to position elements on a Web 
page — although unpredictably, because 
the table’s proportions can vary by 
browser and window size. Still, quicker, 
easier and more trusty — if less exciting — 
than frames for dealing with things like 
headers and navigation bars. 


Tag 

An HTML command telling browsers what 
to display or how to display it. They are 
written as <tag> and most need a sign off 
</tag>. For instance, to make text bold, 
type: <strong>Bit of text you want to be in 
bold</strong>. <strong> is the open tag 
and </strong> is the close tag, sending a 
‘bold off' command. A link looks like this: 
<a href="put the URL between these 
quotes">Put your linking text or graphic 
here</a> 


URL 

Uniform Resource Locator. In English, that's 
an address for a Web page or other file. 
http://www.computerarts.co.uk/index.html 
— and it’s the key to the Internet. It’s what 
you type into your browser address bar, 
and what's coded into links to make them 
link. Compare domain name. 


Usenet 
A news network, much but not all of which 
is connected to the Internet. It’s what 


Tables are a great way to control the 
layout of your page, like here at w 
www.aol.com - but you still can’t expect 
what you see in your browser to be 
exactly the same as what your viewers 
see in theirs. 
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your news reader connects into, via a 
news server. 


Video 

Just what you expect — moving audio- 
visual material. Flashy, but generally too 
slow on the Internet. Favourite formats 
include AVI, QuickTime, MPEG, 
Shockwave and RealVideo. 


WAV 

Windows sound, or audio, file format 
which codes sound as a waveform — bit 
like a bitmap, really. A devil on the 
nternet for anything more than a few 
seconds, since the files are pretty 
sizeable. Try MP3 for anything longer. 


Web page pete. 0 

A document in HTML on the Web, which 
you open in a browser to view. You can 
also open it in a word processor — 
Notepad and SimpleText are favourites — 
to see and edit the HTML code itself. Or 
you can open it in a Web page editor. 


Website 

Collection of Web pages which go under 
a site name. Strictly, all the files stored 
under a single domain. 


World Wide Web, ‘the Web’ for short, and 
a revolution in communication, firing 
multimedia between computers on the 
Internet. Strictly speaking, all the files 
connected into the http protocol, or the 
global network of http servers. 


WYSIWYG 

What You See Is What You Get. Used to 
describe Web design software and other 
applications that try to show you what 
you're doing the way it should look when 
viewers see it. An easy alternative to not 
seeing what you get — like when you write 
your own HTML. 


XML 

eXtensible Markup Language. Enables 
you to add information to text in your 
HTML describing what that text is, using 
tags. It’s called Metadata — data about 
data — and doesn’t actually do anything 
on its own. Bit like a definition of the 
contents of a column in a spreadsheet — 
it’s a powerful tool if you're formatting or 
processing a lot of information. EEE 


WYSIWYG editors take the geek out of 
Web design - you just worry about what 
your page looks like, while the app 
makes the code for you. This is a page 
from w www.freeguestbooks.com, 
opened in Allaire Homesite. 
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casos 


disc 03 web design special 99 


ractive 


Software demos, tutorials, Web hotlinks, walkthroughs & resources 


Dual 30-day trial software 


‘emarcaneonicncacatesatse 


Where will | find these on the CD? 
PCSoft\Demos (PC) 
MacSoft\Demos (Mac) 


Beyond Press 4 


Full product: £351 
Computers Unlimited 
t 0181 358 5857 

Ww www.extensis.com 


What does this software do? 
It’s an XTension for QuarkXPress which translates 


XPress documents into Web savvy pages. Reviewed in 


issue 24 of Computer Arts. 


Min QuarkXPress and a system capable of running it 


Dreamweaver 2 


Full product: £351 
Computers Unlimited 


CD-ROM basics to get you going 


Having problems installing your CD? Fix them here... 


1 How do | start the CD? 
The CD should auto-run when inserted into your 
computer's CD drive. If not, run either: 


> CAiSpecMac for Mac users 
> CAiSpecWin32.exe for Windows 95, NT or 98 users 


If you want to toggle auto-run on and off, use the 
appropriate Control Panel on your computer. 


2 Do| need any specific software to run the CD? 

Yes. You will need Apple's QuickTime digital video 
software in order to make full use of the CD interface. 
Luckily, we have provided this and if your computer 
doesn't already have it installed, you will be prompted to 
do so when running the interface for the first time. 


You will also need Web browser software to make use of 
the Web linked features of the CD (see below). This is 
either of the following: 


> Microsoft Internet Explorer 3 or higher (on the CD) 
> Netscape Navigator 3 or higher (on the CD) 


Please ensure you are connected to your ISP before 
starting the CD if you intend to use the Web linked 
features. 


3 What about the CD Web linking features? 
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The CD has some sections which directly link to the Web. 
These are: 


» The Computer Arts Website 

Go straight to our Website via your browser 

> Subscribe 

The easiest way to subscribe to Computer Arts, on-line 
> Web Links 

Categories of five Websites each 

> Current Compo 

Enter the current Computer Arts Specials competition 
and do away with postcards 


4 What if | need further assistance? 

You can contact our Technical Support department by: 
> esupport@futurenet.co.uk 

> wwww-futurenet.com/support 

» £01225 732 310 

» £01225 442244 (lines can be very busy) 


5 What if | have a faulty CD? 

This is rare but if confirmed by Technical Support, please 
teturn your disk to the address below and a free 
replacement will be with you inside 28 days. 


Disctronics 

Southwater Business Park 
Worthing Road, Southwater 
West Sussex, RH13 7YT 


£0181 358 5857 
Ww www.macromedia.com 


What does this software do? 

It's a Website authoring solution aimed squarely at 
professionals. It does all the HTML in the background 
so it’s great for designers. Reviewed in issue 28 of 
Computer Arts. 


PC Min: P90 > Wing5/8/NT 4.0 » 32RAM » 20HD 
Mac Min: PPC > 24RAM » Sys7.5 » 20HD 


Fireworks 2 


Full product: £163 (upgrade £116) 
Computers Unlimited 

£0181 358 5857 

WwW www.macromedia.com 


What does this software do? 
It’s a Website graphics production tool. Reviewed in 
issue 22 of Computer Arts. 


PC Min: P120 > Wing5/8NNT 4.0 » 32RAM > 60HD 
Mac Min: PPC > 24RAM > Sys7.5.5 » 60HD 


Flash 3 


Full product: £304 
Computers Unlimited 
£0181 358 5857 

Ww www.macromedia.com 


What does this software do? 

It's a vector based interactive multimedia authoring 
tool specifically for the Web. Reviewed in issue 22 of 
Computer Arts. 


PC Min: 486 > Wing5/98NNT > 16/24RAM 
Mac Min: PPC > 16RAM > Sys7.5 


Page M i il 3 (a5 day trial version) 


ae 


Full product: £93 (upgrade £46) 
Adobe 

£0131 458 6842 

Ww www.adobe.com 


What does this software do? 
It’s a Website authoring solution, reviewed in issue 
27 of Computer Arts. 


PC Min: P90 > Wing5/8NT 4.0 > 16RAM 
Mac Min: PPC » 8RAM > Sys7.5.5 


Claris Home Page 3 


Full product: £81 
Filemaker Inc. 

t 0845 603 9100 

w www.filemaker.com 


What does this software do? 

It’s a Website authoring solution which is ideal for 
the smaller Web business. Also enables access to 
Filemaker Pro databases. 


PC Min: P90 > Wings5/98NNT 4.0 » 16RAM 
Mac Min: PPC > 8RAM > Sys7.5.5 


Extensis PhotoTools 3 


Full product: £116 
Computers Unlimited 
t 0181 358 5857 

Ww www.extensis.com 


What does this software do? 

It’s a Photoshop plug-in which makes the production 
of graphics suitable for the Web a no fuss task. 
Reviewed in issue 26 of Computer Arts. 


Min Photoshop 4.0 and a system capable of running it. 


PageMill 3 


Co. When you open PageMill, you'll 
need to display the ‘Inspector’ 
(shown here), which is under the Window 
menu (you'll also find other useful 
palettes there). The Inspector palette is 
important as it enables you to set up a 
colour or image for your background, 
plus colours for text and links. 


o.: 


In the toolbar at the top of the 

, you can change the style of 
your type. There are seven different 
sizes to choose from. You can also 
change the colour and font (remember 
to use only fonts that are common to all 
computers - Times or Arial are the most 
widely used). By pressing the button with visible. Here, we’ve used a table to lay 


a picture, you can insert an image. out three images in a horizontal line. 


€on the cd © web special > 


PC-only 30-day trial software 


Where will | find these on the CD? 
PCSoft\Demos (PC) 


Allaire Homesite 4 


Full product: £88 | 
Uni Palm 
t 01638 569 600 | 
Ww www.allaire.com | 

| 


What does this software do? 
It's a Website authoring and HTML editing package 
which is more aimed at those familiar with HTML. 


| 
Min P90 > Win95/48NNT 4.0 > 16RAM > 10HD | 
| 
| 
| 


HoTMetalL Pro5 


Full product: £116 (upgrade £58) 
Softquad 

t 0181 387 4110 

w www.softquad.co.uk 


What does the software do? 
It’s a Web authoring and HTML editing package. You 


must have /nternet Explorer installed too. Handily, this 
is also on the CD — in the Software Resources section. 


Min P90 > Wings /NT 4 > 16RAM 


NetObjects Fusion 4 


Full product: £234 + delivery £9.95 
Twilight Zone | 


Here’s how to get started in this Web page creation package... 


=| 


The button next to the Insert 
Image button enables you to insert 
a table. Using the Inspector, you can 
define the width, how many rows and 
columns you want, and whether or not to 
have a border. Just type in ‘0’ if you don’t 
want the outline of the table to be 


t 01923 801 812 
Ww www.netobjects.com 


What does the software do? 
NetObjects Fusion is a Website authoring tool which 
was reviewed in issue 30 of Computer Arts. 


Min P90 > 32RAM > SoHD » Navigator /Internet Explorer 


Xara 3D 3 


15 day trial version 

Full product: £28 (upgrade £11) 
Xara Limited 

t 01442 350 000 

W WWW.xara.com 


What does the software do? 
It's an easy-to-use 3D text modelling and rendering 
program. Reviewed in issue 31 of Computer Arts. 


Min P75 > 16RAM > Wings 


Symantec VisualPage 2 


Full product: £84 
Symantec 

t 0171 616 5600 

Ww www.symantec.co.uk 


What does this software do? 
It's a Website authoring and HTML editing package 
which has extensive support for Java. 


Ny 


Min P90 > Wings /8NT 4.0 > 16RAM. 


ou can preview it in PageMill by 
pressing the Paper and Quill button at 
the top right of the screen. This is similar 
to previewing your page in the browser. 
However, it’s still worth opening the 
Page in several different browsers to 
check out how it looks. 


CS. Once you've finished your page, 
y 
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Mac-only 30-day trials 


> Where will! find these on the CD? 
MacSoft\Demos (Mac) 


Electrifier Pro 


Full product: $595 
Electrifier Inc. 

t 001 919 968 0701 
wwww.electrifier.com 


What does the software do? 

It’s a Web contents creation package, designed to 
deliver media rich stuff to put on your Website. It was 
reviewed in issue 29 of Computer Arts. 


Min PPC > Sys7.5 » 8RAM 


Freeway 2 


Full product: £199 
SoftPress 

£0800 731 3425 

Ww www.softpress.com 


What does the software do? 

Freeway is a Web authoring environment which 
resembles a DTP package in its use and is 
predominantly a WYSIWYG package. It was reviewed 
in issue 27 of Computer Arts. 


Min 68K > 8RAM 


NetObjects Fusion 3 


Full product: £234 


| 


Twilight Zone 
t 01923 801 812 
wwww.netobjects.com 


What does the software do? 
NetObjects Fusion is a Website authoring tool which 
was reviewed in issue 19 of Computer Arts. 


Min PPC > 16RAM 


Symantec VisualPage... | 


Full product: £84 
Symantec 

t 0171 616 5600 

Ww www.symantec.co.uk 


What does the software do? 
It's a Website authoring and HTML editing package 
which has extensive support for Java. 


Min PPC > Sys7.5.5 » 16RAM. 


Dual demos 


Where will | find these on the CD? 


PCSoft\Demos (PC) 
MacSoft\Demos (Mac) 


Headline Studio 


Full product: £210 

Computers Unlimited 

£0181 358 5857 
wWwww.metacreations.com 

PC Min: P90 > Wing5/98/NT > 32RAM > 5HD 
Mac Min: PPC > MacOS 8 » 32RAM 


ImageStyler 


Full product: £100 

Adobe, t 0131 458 6842 

Ww www.adobe.com 

PC Min: P90 > Wing5/98/NT > 32RAM > 4oHD 
Mac Min: PPC > Sys7.5.5 » 32RAM > 4oHD. 


PC-only freeware 


Where will | find these on the CD? 
PCSoft\Demos (PC) 


Hyperceive = 


Full product: £149 
Insigma 


HoTMetal Pro 3¢ Get to aripsy with this piece of software from SoftQuad... 


eo. The best way to work with 
SoftQuads’ HoTMetaL is in the 
“Tabs On View’ screen. Although a more 
traditional WYSIWYG authoring view is 
available, it’s in this mode that the 
package combines its unrivalled HTML- 
crunching abilities with a preview of your 
page. This unique approach may take 
some getting used to - your layouts will 
be appear skewed - but it’s ideal for fine 
editing tasks. 
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oS. To check out its capabilities, 
insert the I-bar between the ‘Body’ 
tags, and choose ‘Insert Table’ from the 
Table menu. A dialog box appears with 
a full range of editable parameters, 
including the ability to change the 
background colour, absolute width in 
pixels and cell attributes. You can place 
multiple tables at the same time by 
choosing Apply instead of OK. 


4 ©. To edit an 

element after 
it’s in position, 
make sure the 
Attribute Editor is 
visible (if it’s not, 
go to the View 
menu and select 
it). Next, click 
between the tags 
for the element 
you want to edit. 
This selects the 
element, and the 
Attribute Inspector 
then changes 
to reflect the 
available 
parameters for 

that element - including DHTML and 


JavaScript event options. 


t 0870 606 0550 
w www.hyperceive.com 


What does the software do? 

It’s a freeware cut-down version of the full product 
which enables the creation an playing of audio 
suitable for Websites. 

Min P90 > 16RAM > Wings/8NT > 20HD. 


The tabbed views in the bottom 

left corner of the Editing window 
make it easy for you to switch quickly to 
other modes as you work. With a click 
you can work in pure HTML, editing 
parameters and code in the same way as 
in ‘Tags In View’ mode. If you need to see 
how your page is shaping up, choose the 
live Internet Explorer-powered preview. 


PC-only demo 


Where will I find these on the CD? 
PCSoft\Demos (PC) 


DeBabelizer Pro 4.5 


Full product: £468 
Computers Unlimited 

t 0181 200 8282 

w www.equalibrium.com 


What does the software do? 

It’s a batch image optimization package which is 
suitable for converting large amounts of images to 
formats suitable for the Web. It was reviewed in issue 
15 of Computer Arts. 


Min 486 > Wings > 16RAM > 40HD 


Mac-only 
demo software 


Where will I find these on the CD? 
MacSoft\Demos (Mac) 


DeBabelizer 3 


Full product: £441 
Computers Unlimited 

t 0181 200 8282 

w www.equalibrium.com 


What does the software do? 

DeBabelizer is a graphics manipulation and 
conversion package which can automate many 
common tasks with images and their palettes. It was 
reviewed this version in issue 20 of Computer Arts. 


Min 68K > Sys7.1.2 » 2RAM > 10HD 


BBEdit 5 


Full product: £112 

Full Moon 

t 01628 660 242 

w www.barebones.com 


What does the software do? 
It's an HTML text editor which has many useful 
features — for the more experience HTML coder. 


Min 68K > Sys7 > 8RAM. 


Electrifier Pro 


Eon the cd ee web ae > 


Assembling streaming movies for the Web in Electrifier is a 
straightforward job, as you'll see in this example... 


Launch Electrifier Pro and decide what size 
movie you want. We’ve gone for 320x240. First, 
we add a background texture created in Photoshop. 
To import the file, simply drag-and-drop it into the 
Project window. Don’t worry if it’s not exactly the 
same size - you can resize it in Electrifier. 


fe Edit Movie Actor Content ‘ange text @) Window Help | 


So. The next stage is to drag-and-drop a 3D 
rendered movie of a wire globe into the Project 
window. Then we drag the Set Loop action from the 
Modifiers palette onto the movie and set the action 
to Idle so it spins until interrupted. Finally, we mask 
out the black background of the movie to show the 


100 120 


With all the elements in place, we need to 
sort out the timing so that the animation flows 
smoothly (and without actors disappearing halfway 
through). This is done in the Structure window. The 
longest blue bar is the total length of the animation, 
set here for a lengthy eight seconds. 


piceareppsmeeserceies “1 


a 


Des 


CS. To make things more interesting, we're going 
to add a ripple effect to the background which 
QuickTime applies on-the-fly when the movie is 
played. Select the Ripple Effect tool, drag a marquee 
around the area you want to affect, and then tweak 
the ripple settings until you’re happy. 


CS. Next, we add a simple text logo and slogan 
for a fictitious Web design company. The white 
area knocks out in the final movie. The text is 
animated so that the logo scrolls from the top and 
the slogan scrolls from the right. It could just as 
easily spin, fade, or dissolve in. 


C. Hit the Preview tab, and you can see your 
animation play out on screen. Now you can 
either export the movie flat, or compress it ready for 
streaming from the Web. The total time to assemble 
in Electrifier is less than five minutes. EI 
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< web special — online resources > 


computer 


als: ecial 


The definitive guide to We pos design > Mack) & PC 


The best online resources are hotlinked direct from our CD-ROM interface 


Optimise your 
Web graphics 


The Image Mechanic 


W www.imagemechanic.com 


The Mechanic is a suite of three top on- 
line graphics tools. SmartSaver is one of 
the best optimisation tools on the Web 
and enables you to achieve the best 
balance between file size and quality for 
your GIFs, JPGs, and PNGs. Image Any- 
Sizer resizes your images to, um, any 
size, while the Particle Engine adds rain, 
snow, fire and more effects to your image. 


GIF Cruncher 


W www.gifcruncher.com 


Crunch your GIFs into a fraction of their 
file size with the best-named optimisation 
tool around. A simple crunch costs you 
nothing and you can crunch as many 
times as you like. A batch option is 
available if you want to pay and check 
out its sister site JPEG Cruncher at 
Wwww.jpegcruncher.com. 


GIF Lube 


W www.giflube.com 


Optimise your images and get them 


The Mechanic is a suite of online tools. 


flowing on-line faster with GIF Lube. You 
have to pay to lube your images — $9.95 a 
month although you can try one for free — 
but it does support GIFs and JPEGs and 
you can convert between the two formats. 
It can also be used to check all the 
images on your site. 


Palette Man 


W www.paletteman.com 


Sort out a colour scheme for your Website 
with the help of Palette Man. Mixing and 
matching your colours on-line ensures 
that the colours you choose are Web-safe 
and will look good through the eyes of a 
Web browser. Palette Man converts 
between hexadecimal and RGB values. 


GIFSplit 


W www.jbarchuk.com/ifsplit 


High Five dishes out awards to good-looking and well-designed sites. 
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Stick a fork in the head of bad sites! 


GIFSlit splices your GIF images according 
to your own specifications and 
automatically generates the HTML code 
needed to place the image in your Web 
page. Neat. A split image can be used as 
a navigation tool where each area of the 
image links to a different destination. It 
also makes it more difficult for people to 
steal your copyrighted hard work. 


Better Web 
page design 


High Five 


W www.highfive.com 


High Five doles out awards to sites 


CLICK THE CORRECT SPOT AND Win S307 
@eees 
Page’ Resource.Com 


News/Updates: Saturday, May 08 1999 
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4 
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Page Resource has great articles. 


Sten come wa sc tn 


Builder is chocka with useful tips. 


demonstrating examples of great Web 
design. An in-depth review accompanies 
each award so you know why a site has 
won and a rating is given to different 
aspects of design including ease-of-use 
and navigation. 

We recommend that you join the 
excellent High Five Babble List to share 
useful commentaries and discussion with 
fellow Web designers. 


Page Resource 


W www.pageresource.com 


This isn’t the prettiest of sites but it has 
a great collection of articles to help you 
build a better site. If you want to know 
how to make your site load quickly, or 
perhaps you're merely wondering what is 
the key to good Web design (ah, if only 
this massive and ever-changing topic 
could be summed up so easily) this is 
the place to learn it. 


Fork in the head 
W www. forkinthehead.com 
Stick a fork into ugly Websites by letting 
the responsible Webmaster know how 
much you hate their handiwork. Fork in 


the head lets you vent feelings and share 
hatred of poor design but it’s constructive 


MP3 has the lowdown on streaming sound. 


owe bees enact = wWNAOR TIPE MRR = HunATH LY 


msdn. 
— 


Visit the Web workshop at Microsoft. 


too — a series of highly readable and 
enjoyable articles explain the principles 
of good and bad Web practice. 


Yale Style Manual 


w http:/info.med. yale.edu/caim/manual/ 
contents.html 


This site is plain, simple and packed 
fatter than a tycoon’s wallet with help and 
advice for creating a better-looking, faster- 
loading, easier-to-use Website. 

You can buy the whole style guide 
in old-fashioned, off-line book format 
(remember them?) but it’s free on-line 
and ideal for anyone wanting to learn 
the elements of good Web style. It’s 
definately worth dipping into as you're 
bound to find some new tips. 


Web Pages That Suck 


W www.webpagesthatsuck.com 


Not everyone thinks that learning good 
design from bad design is the way to build 
a better Website, but keep an open mind 
and ignore the corny photographs of 
WPTS author, Vint Flanders. You'll find 
some worthwhile analysis of what 
constitutes bad design on this site and, 
more important, a page of great links to 
more resources that cover issues from 
grammar and typography, to navigation. 


HTML and 
coding tips 
A Beginner’s Guide to HTML 


w_www.ncsa.uiuc.edu/General/nternet WWW/ 
HTMLPrimer.html 


If you're brand, shiny new to the business 
of HTML, this guide teaches you what it’s 
all about starting from the beginning. It 
has been thoughtfully broken into several 
parts for easy on-line reading or you can 
display the full version and print it off for 
useful off-line reference. 


Webreview.com aka, 


Pe a=: 
Swaine’s Frames 


Web Design 
Aphated Aaicles 


Why do so many Web sites suck? 


Yorman yecemdy chided softente devebooets 


From HTML to Javascript: Web Review. 


Web ig Virtual 
Library (WDVL) 


W www.stars.com/Authoring/HTML 


The excellent WDVL takes you through the 
basics of HTML and beyond. Once you've 
learned your tags you can move through 
coding standards, understand browser 
compatibility issues, discover the best 
tools for the job, and take a peek at 
dynamic HTML (DHTML) before striding 
forth into the world of style sheets and 
maybe even, gasp, JavaScript. 


.net magazine’s Web Builder 


W www.netmag.co.uk 


The Web Builder hordes a collection of 
articles aimed at getting the novice ~ 
Webmaster started and the intermediate 
moving along with style. Read the four- 
part Build Your Own Web site to learn how 
to build a site then dip into the Hands-on 
HTML tutorials — each categorised by 
HTML topic — before getting into the 
advanced likes of JavaScript. 


Web Review 


W www.webreview.com 


An extensive collection of articles dealing 
with all aspects of coding - from HTML to 
JavaScript via Style Sheets and DHTML. 
Web Review also gets stuck into more 
advanced areas of Web building including 
hardcore programming in Java and Perl 
and knocks off a tutorial or two on linking 
databases to Websites. You could spend 
days on this site. 


MSDN Online Web Workshop 


w msdn.microsoft.comworkshop/ 


Love the software giant or hate it, but 
don't ignore Microsoft's brilliant on-line 
resource for budding Webmasters 
everywhere. The HTML tutorials introduce 
you to the code and show you what the 
result looks like in your Web browser. 
There’s all sorts of authoring tips and 
tricks and expert advice on site design 
and, if you think you're hard enough, 
visual basic programming. 


This is your | 


Home | New | Hot } SiteMap | About 


Web Surfing - Browsers 


Well-categorised info at Dave Central. 


< online resources Ss web special > 
pc A aR ra i a ae 


NEW 


GAMES 


TOONS 


MUSIC 


FLASHCARDS 


macromedia 


Check out the latest Shockwave creations at Macromedia’s Shockrave. 


Streaming 
technologies 


Real Networks 


Ww www.real.com 


Real Network’s streaming audio and 
video technology still leads the on-line 
streaming sound and vision market. The 
new G2 player has improved the reception 
of sound and video across a dial-up 
connection so now's as good a time as 
any to put your noise creative noise on- 
line. The Real site can help (and see our 
tutorials on page 58). 


QuickTime 


W www.quicktime.com 


QuickTime is still the format of choice for 
many movie and video clips on the Net. 
The new Star Wars trailers wouldn't have 
been the same without it. QuickTime 3.0 
can now be streamed across the Net and 
it boasts a range of new features and 


Beatnik, Inc. 


‘Serve Content 
Seting stared? GE | atae, Linux, 
BawcSeos bs | Windows. 


Streaming media info at Real. 


technological improvements to keep 
QuickTime a vital movie format. 


MP3.com 


W www.mp3.com 


MP3.com is absolutely the best place to 
start learning about MP3. Get a feel for 
the types of free songs available, learn 
how to encode an MP3 song, what you 
need to play them, and read MP3.com 
founder Michael Robertson's series of 
articles about MP3 and its surrounding 
controversies. 


Beatnik 


W www.headspace.com 


Beatnik is Thomas Dolby’s fantastic 
music technology aimed at bringing Web 
pages to life. Beatnik is able to compress 
sound into tiny file sizes and embed it 
within a Web page. Web users with the 
Beatnik plug-in can then play it. Beatnik 
has been put great use across the Web — 
and you can even explore Dolby’s 
Headspace site for inspiration. 


Movie and video clips at QuickTime. 


+ Multimedia & Design 
+ PaimPiiot 


+ Windows cs 


Get your software at Download. 
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< web special & online resources > 
$< ____ 


Webmonkey is the online home of Wired. 


Shockwave 
W www.shockwave.com 


Macromedia's Shockwave has become 
the standard for multimedia content on 
the Web. Sound and animation has 
poured on-line in the Flash format 
because Flash movies are quick to 
download — they can even be streamed 
through RealNetworks’s G2 — and they're 
scaleable because they use vector 
graphics. Flash is now well on its way 
to becoming the standard for vector 
graphics delivery on the Web. 


Software 
downloads 


Dave Central 
W www.davecentral.com 


It’s the nature of the Web that one guy 
can spawn a whole page dedicated to 
downloading software and Dave has done 
a fine job. Everything is categorised and 
easy-to-find: 


Download 


W www.download.com 
Download is handy because it tells you 


sefvare Si Sem 


saetch 
toti\WUS More Fresh Daily. 


+ REE Fite of the Dax 
+ Hx Game af the Day 
+ Tegne't Boreen Sasae 
C2 Donnizad Guide 


Find tiny online file sizes at Vector. 
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ae @ 
*yisbudes: 


Please Select your Continent 
or the: fastest rosate downoad sites: 


+ Alice + Europe 
+ Aaa + North America 


+ Austraks + South Americs 


‘Radical’ software from File Dude. 


how many downloads there has been of 
each piece of software and splashes a 
Pop graphic beside the most popular. 
Links to mirror sites make downloading 
easier and there's a handy search 
function so you can get right to the 
program you want. 


Pure Mac 


W www.pure-mac.com 


An essential resource for every Mac user. 
The software is neatly categorised by 
topic and then each program is also listed 
in alphabetical order. There are direct 
download links to make your life easy, 
and links to the homepage of the 
software developer so you can scout 
around for more detail on any particular 
program you fancy. 


FileDudes 


W www.filedudes.com 


Are you a skateboarding Web rocker 
dude? Get yourself down to one of the 
cooler software corners of the Web. 
FileDudes has a heap of programs which 
are rated and the best in each category 
stamped with a Dude Approved logo. 
Windows and Mac programs are kept 
separated so it’s easy to find what you 
want or need. 


VersionTracker 


W www.versiontracker.com 


Don't get left behind... keep up with the 
latest versions of Mac software with the 
help of this unique and quite brilliant site. 
There's a handy link to the developer's 
Website and a direct link to the software 
download. A powerful search feature 
makes it easy to find specific programs. 
Great stuff. 


Latest news and 


further resources 
Webmonkey 


HTML - The Hypertext Markup 
Language 


Alan Rictorood 


Hpet at Matta Language isthe Suncarrentes bldg 2 of ne 
ab We present vevecuteticles. nstials, end raterences cet HTM. 


Web Developer's Virtual Library. 


Protect your 
site today 


‘Tae get Dang edn Wg kyo id yo can fe whee 
hats aos Jose eben 


Web Builder from our sister mag, .net. 


W www.webmonkey.com 


The technology gurus at the US's Wired 
Magazine keep you abreast of the latest 
Web developer issues and dish up a great 
feast of tutorials, tips and advice on all 
aspects of Web building. 

The latest hot tools are reviewed and 
often put head-to-head. Recent highlights 
include The New WYSIWYG editor 
Shootout which is essential reading for 
anyone who hates HTML. 


Builder 


W www.builder.com 


Builder is quite possibly the best Web 
building resource on-line. Its articles and 
tutorials are always useful and informed 
and you quickly realise you're in the 
hands of experts. 

Builder news gives you the latest 
Web building hot news and gossip and 
you can share your developer problems 
with others in the Builder Buzz forums. 


The World Wide Web 
Consortium 


W http:/W3c.0rg 

The WSC ratifies the standards which 
shape the course of Web design. Its 
primary concern is making the Web 
accessible to everyone using a variety 

of different computing platforms and, to 
that end, it sets the standards to which 
designers should adhere if they want 
everyone to see their Web pages properly. 


Web Standards 


W www.webstandards.org 


Like everyone else, the folks behind the 
Web standards pressure group is fed-up 
with the problems of designing Websites 
that will look good to all browsers on all 
platforms. Just when everyone thinks we 
have a standard along comes either 
Microsoft or Netscape with a new bit of 
browser technology that is incompatible 
with others. If you care about issues of 
Standards — and as a designer you should 
— show your support. 


Vector Zone 


W www.vectorzone.com 


The next big step forward for Web 
graphics design will be the endorsement 
of a standard for vector graphics. 
Macromedia is pushing the way forward 
with its vector-based Flash file format. 
Learn why the Web needs vector graphics 
and keep up-to-date with the latest vector 
standard happenings at the VectorZone. 


Showcased 


designers 

pages 36, 72, 62,52 & 22 
AKQA 

W www.akgqa.com 


Deepend 


W www.deepend.co.uk 
The Hub 

W www.thehub.co.uk 
Motion Pixels _ 
W www.motionpixels.co.uk 


Subnet 


W www.subnet.co.uk 


Featured 


software 

pages 44, 16, 28, 38 & 58 
Claris Home Page 

W www. filemaker.com/products/ 


Dreamweaver 


W www.macromedia.comAoftware/dreamweaver/ 


Fireworks 


W www.macromedia.comAoftware/fireworks/ 


Flash 


W www.macromedia.comfoftware/flash/ 
RealMedia 


W www.real.com 


Search engines 
Find new inspiration! 
Altavista 

W www.altavista.com 
Hotbot 

W www.hotbot.com 
Lycos 

W www.lycos.com 


Metacrawler 


W www.metacrawler.com 


Yahoo 


W www.yahoo.com CE 


macromedia 
FLASH 4 
olution for Producing 
Te araeort Vector-Bas 


Web Sites _” 
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< win macromedia software! * web special > 


-macromedia 


VER @ 
Solution for : 
Theyotessional Web Site 
Design and Production 


nedia 
ai macron = 


b Graphics 
nae Production 


KS= 
The Solution for Professional 


macro 


die 


WIN THE ULTIMATE — AND UNIQUE TO COMPUTER ARTS SPECIALS — WEB DESIGN BUNDLE FROM macromedia’ 


acromedia has established itself as 
unquestionably the biggest name in 
creative software for multimedia and 
online design. Each new software 
release strengthens the impressive applications 
stable, and it can now claim a market leader in each 
section of Web design. And guess what? You can bag 
yourself a copy of the three most important titles — 
right here, right now, and for nothing! 

Among the new features of Flash 4 are direct 
support for the MP3 Streaming audio file format, 
flexible handling of text fields and new tools for 
creating interfaces. There’s also an extended library 
of actions and behaviours which make it a 
straightforward job to create interactive movies 
without scripting. There’s evert a one-stop ‘Publish’ 
command, enabling you to export to Flash, GIF, JPEG 
and PNG formats. 

Dreamweaver 2 is widely acknowledged as the 
best WYSIWYG site design program — you'll find out 
more about it in our Software Buyer's Guide on page 
83, and of course there’s a 30-day fully-working 
version on the CD and tutorial on page 16. 

Fireworks 2 is the latest version of Macromedia’s 
popular Web graphics optimisation tool — once again 
there’s a 30-day fully-working version on the CD, and 
a tutorial on page 28. More info on any Macromedia 
product can be found at wwww.macromedia.com 


The Competition The Rules 


Macromedia’s newly-updated online animation 
application is as quick as a... 


Closing date for all entries is 31st July 1999. 
Employees of Future Publishing, Macromedia, their 


agents, or their families may not enter. No multiple 


A-— Flash, entries will be accepted. The editor’s decision is final, 
B - Fox, there are no cash prize alternatives, and no other 

C - Ferret? correspondence will be entered into. EEE 

To enter 


Try the easy way via the Web: 

1) Insert the Web Special CD 

2) On the Contents screen, click ‘Current Compo’ 
3) Put Macromedia Bundle’ as the competition 
name, fill in the form and click ‘Submit Entry’. 


Alternatively, if you don’t have Web access you can 
submit your entry on a postcard to: 

Macromedia Bundle competition 

Computer Arts Specials, Future Publishing, 

29 Monmouth Street, Bath, BA1 2DL. 


State whether you're PC or Mac based, and 


remember to include your address and a daytime 
telephone number if possible. 


web design special 
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